2012-11-03 47 views
3

我有一些JavaScript代碼像下面的Javascript電話號碼自動轉換不工作

function mask(eventVal,val){ 
    var len = val.value.length; 
    var key = whichKey(eventVal); 
    if(key>47 && key<58) 
    { 
     if(len==0)val.value=val.value+'(' 
     else if(len==4)val.value=val.value+') ' 
     else if(len==9)val.value=val.value+'-' 
     else val.value=val.value; 
    } 
    else{ 
     val.value = val.value.replace(/[^0-9-]/,'') 
     val.value = val.value.replace('--','-') 
    } 
} 

function whichKey(eventVal) { 
    var code; 
    if (!eventVal) var eventVal = window.event; 
    if (eventVal.keyCode) code = eventVal.keyCode; 
    else if (eventVal.which) code = eventVal.which; 
    return code; 
} 

HTML

<input type="text" name="PhoneNumber" id="PhoneNumber" value="" onkeydown="mask(event,this)"/> 

它工作正常,當我輸入電話號碼,像1234567890自動轉換成( 123)456-7890當我試圖刪除像從結尾刪除0值,然後格式化完全毀了。像123)456-789,甚至當我點擊任何其他地方時,它都會毀了。任何人都可以幫我解決它嗎?

+1

的問題是,退格鍵和其他非數字字符將沿着您的'else'路徑進行,替換爲刪除之前添加的括號。除此之外,您可能想使用'onkeyup'而不是'onkeydown',這樣您就可以使用_after_值來處理輸入的任何字符。無論如何,以下是供玩家玩的演示:http://jsfiddle.net/weSvU/ – nnnnnn

+0

P.S.還要注意的是,因爲您在'if'測試中使用_key_代碼而不是_character_代碼,所以對於通過數字鍵盤輸入的字符以及(在我的國家/地區的鍵盤上)1和!具有相同的鍵碼,2和@具有相同的鍵碼,等等。我建議你處理'onblur',這樣你就不必處理試圖在字符串中間編輯的用戶等等。當他們離開現場時只需重新格式化整個字符串... – nnnnnn

+0

您的代碼不起作用 – Soumya

回答

3

檢查這個腳本..

<script language="javascript"> 
var zChar = new Array(' ', '(', ')', '-', '.'); 
var maxphonelength = 14; 
var phonevalue1; 
var phonevalue2; 
var cursorposition; 
function ParseForNumber1(object){ 
    phonevalue1 = ParseChar(object.value, zChar); 
} 
function ParseForNumber2(object){ 
    phonevalue2 = ParseChar(object.value, zChar); 
} 
function up(object,e) { 
    if(e){ 
    e = e 
    } else { 
    e = window.event 
    } 
    if(e.which){ 
    var keycode = e.which 
    } else { 
    var keycode = e.keyCode 
    } 
    ParseForNumber1(object) 
    if(keycode >= 48){ 
    ValidatePhone(object) 
    } 
} 
function down(object,e) { 
    if(e){ 
    e = e 
    } else { 
    e = window.event 
    } 
    if(e.which){ 
    var keycode = e.which 
    } else { 
    var keycode = e.keyCode 
    } 
    ParseForNumber2(object) 
} 
function GetCursorPosition(){ 
    var t1 = phonevalue1; 
    var t2 = phonevalue2; 
    var bool = false 
    for (i=0; i<t1.length; i++) 
    { 
    if (t1.substring(i,1) != t2.substring(i,1)) { 
     if(!bool) { 
     cursorposition=i 
     window.status=cursorposition 
     bool=true 
     } 
    } 
    } 
} 
function ValidatePhone(object){ 
    var p = phonevalue1 
    p = p.replace(/[^\d]*/gi,"") 
    if (p.length < 3) { 
    object.value=p 
    } else if(p.length==3){ 
    pp=p; 
    d4=p.indexOf('(') 
    d5=p.indexOf(')') 
    if(d4==-1){ 
     pp="("+pp; 
    } 
    if(d5==-1){ 
     pp=pp+")"; 
    } 
    object.value = pp; 
    } else if(p.length>3 && p.length < 7){ 
    p ="(" + p; 
    l30=p.length; 
    p30=p.substring(0,4); 
    p30=p30+") " 
    p31=p.substring(4,l30); 
    pp=p30+p31; 
    object.value = pp; 
    } else if(p.length >= 7){ 
    p ="(" + p; 
    l30=p.length; 
    p30=p.substring(0,4); 
    p30=p30+") " 

    p31=p.substring(4,l30); 
    pp=p30+p31; 

    l40 = pp.length; 
    p40 = pp.substring(0,9); 
    p40 = p40 + "-" 

    p41 = pp.substring(9,l40); 
    ppp = p40 + p41; 

    object.value = ppp.substring(0, maxphonelength); 
    } 
    GetCursorPosition() 
    if(cursorposition >= 0){ 
    if (cursorposition == 0) { 
     cursorposition = 2 
    } else if (cursorposition <= 2) { 
     cursorposition = cursorposition + 1 
    } else if (cursorposition <= 4) { 
     cursorposition = cursorposition + 3 
    } else if (cursorposition == 5) { 
     cursorposition = cursorposition + 3 
    } else if (cursorposition == 6) { 
     cursorposition = cursorposition + 3 
    } else if (cursorposition == 7) { 
     cursorposition = cursorposition + 4 
    } else if (cursorposition == 8) { 
     cursorposition = cursorposition + 4 
     e1=object.value.indexOf(')') 
     e2=object.value.indexOf('-') 
     if (e1>-1 && e2>-1){ 
     if (e2-e1 == 4) { 
      cursorposition = cursorposition - 1 
     } 
     } 
    } else if (cursorposition == 9) { 
     cursorposition = cursorposition + 4 
    } else if (cursorposition < 11) { 
     cursorposition = cursorposition + 3 
    } else if (cursorposition == 11) { 
     cursorposition = cursorposition + 1 
    } else if (cursorposition == 12) { 
     cursorposition = cursorposition + 1 
    } else if (cursorposition >= 13) { 
     cursorposition = cursorposition 
    } 

    var txtRange = object.createTextRange(); 
    txtRange.moveStart("character", cursorposition); 
    txtRange.moveEnd("character", cursorposition - object.value.length); 
    txtRange.select(); 
    } 

} 

function ParseChar(sStr, sChar) 
{ 
    if (sChar.length == null) 
    { 
    zChar = new Array(sChar); 
    } 
    else zChar = sChar; 
    for (i=0; i<zChar.length; i++) 
    { 
    sNewStr = ""; 
    var iStart = 0; 
    var iEnd = sStr.indexOf(sChar[i]); 
    while (iEnd != -1) 
    { 
     sNewStr += sStr.substring(iStart, iEnd); 
     iStart = iEnd + 1; 
     iEnd = sStr.indexOf(sChar[i], iStart); 
    } 
    sNewStr += sStr.substring(sStr.lastIndexOf(sChar[i]) + 1, sStr.length); 
    sStr = sNewStr; 
    } 
    return sNewStr; 
} 
</script> 

HTML:

<input type="text" name="txtInput" onkeydown="javascript:down(this,event);" onkeyup="javascript:up(this,event);"> 
+0

謝謝。它真的有效。 – Soumya

+1

如果您編輯以前輸入的值,則不起作用,例如,如果刪除括號之間的數字。至少,它在Chrome中無效:http://jsfiddle.net/pZKPS/ – nnnnnn

0

你可以試試這個代碼替換您的最後一個數字

<script type="text/javascript"> 
function fnc() 
{ 

    str=document.getElementById("atext").value; 
    x=(str.match(pattern)); 
    if(x!="") 
    {str=str.replace(/[0-9]$/g,'')} 
    alert(str); 
} 

</script> 
<body> 
    <input type="text" id="atext"> 
    <input type="button" onClick="fnc()"> 
</body>