onBlur區號

Question

我想要做的是檢查他們是否輸入3個區號的號碼，然後當他們進入3移動到下一個領域。必須輸入3個數字。我嘗試了幾種方法。

更新： 我也試圖確保他們在電話後綴中的區號，電話前綴和4個數字中放置3個必需的3位數字。

我想我不應該使用的onblur ......我想......

表格代號：

---

  <div class="formPhone" style="float:left;"> 
      (<input name="areaCode" id="areaCode" type="text" maxlength="3" 
       onkeyup="validateNextField(this,3,phonePrefix);" 
       onblur="validateFixedLengthNumericField(this,3);" 
       style="font-size:11px; width:20px;" title="Area Code" autocomplete="off">) 
      <input name="phonePrefix" id="phonePrefix" type="text" 
       onkeyup="validateNextField(this,3,phoneSuffix);" 
       onblur="validateFixedLengthNumericField(this,3);" 
       style="font-size:11px; width:20px;" maxlength="3" title="Phone Prefix" autocomplete="off">- 
      <input name="phoneSuffix" id="phoneSuffix" type="text" maxlength="4" 
       onkeyup="validateNextField(this,3,phoneExtension);" 
       onblur="validateFixedLengthNumericField(this,4);" 
       style="font-size:11px; width:25px;" title="Phone Suffix" autocomplete="off"> 
      ext: 
      <input name="phoneExtension" id="phoneExtension" type="text" maxlength="5" 
       onkeyup="validateNextField(this,5,dsnPrefix);" 
       style="font-size:11px; width:25px;" title="Phone Extension" autocomplete="off"> 
     </div> 

JavaScript代碼

---

function validateFixedLengthNumericField(numericField, len){ 

    if (len != numericField.value.length){ 
     numericField.focus(); 
     alert('Field must contain exactly '+len+' numbers.'); 
    } 
} 

// Once the max length is reached it forwards to the next field. 
function validateNextField(numericField, len, nextField){ 

    if (len == numericField.value.length){ 
     nextField.focus(); 
    } 
} 

Answer 1

這應該適合你：

document.getElementById('areaCode').addEventListener('keyup',function(){ 
    if(this.value.length == 3) 
    { 
     document.getElementById('phonePrefix').focus(); 
    } 
},false); 

document.getElementById('phonePrefix').addEventListener('keyup',function(){ 
    if(this.value.length == 3) 
    { 
     document.getElementById('phoneSuffix').focus(); 
    } 
},false); 

例子：http://jsfiddle.net/AlienWebguy/wnSZQ/