如果驗證函數返回true，則重點關注下一個元素

我有多個允許單個數字值的輸入。下面的腳本確認該值是一個數字。如果驗證函數返回true，則重點關注下一個元素

如何在輸入有效數字時將焦點移至下一個輸入？

<input type="text" maxlength="1" onkeypress="return isNumber(event)" required>

function isNumber(evt) { 
    evt = (evt) ? evt : window.event; 
    var charCode = (evt.which) ? evt.which : evt.keyCode; 
    if (charCode > 31 && (charCode < 49 || charCode > 53)) { 
     return false; 
    } 
    return true; 
}

來源

2015-07-03 Kedar Javalkar

您可以通過使用Node.nextElementSibling然後使用HTMLElement.focus()

爲了使迭代到下一行分配重點尋找下一個元素，你必須檢查當前聚焦的元素是否是當前行中的最後一個元素。如果是這樣，然後移動到下一行。

最好是在Element.onkeydown財產使用Event.preventDefault()，然後檢查是否該元素已被填充在Element.onkeyup屬性作爲keypress事件被觸發時，雙方鍵被按下，並再次當它被釋放。

var validChar; 
 
var inputs = document.querySelectorAll('td input[type=text]'), i; 
 
for(i = inputs.length - 1; i >= 0; i--) { 
 
    inputs[i].onkeydown = checkNumber; 
 
    inputs[i].onkeyup = checkFilled; 
 
} 
 
function checkNumber(event) { 
 
    event = (event) ? event : window.event; 
 
    var charCode = (event.which) ? event.which : event.keyCode; 
 
    if (!(charCode >= 48 && charCode <= 53) 
 
    && !(charCode >= 96 && charCode <= 101) 
 
    && !(charCode == 16 || charCode == 9)) { 
 
      event.preventDefault(); 
 
      return false; 
 
    } else if(!(charCode == 16 || charCode == 9)) { 
 
     validChar = true; 
 
    } 
 
} 
 
function checkFilled(event) { 
 
    if(validChar && event.target.value.length === 1) { 
 
     validChar = false; 
 
     nextInput(event.target.parentNode); 
 
    } 
 
} 
 
function nextInput(el) { 
 
    if(el.nextElementSibling) { 
 
     if(!el.nextElementSibling.firstElementChild) { 
 
      nextInput(el.nextElementSibling); 
 
      return false; 
 
     } 
 
     var nextSibling = el.nextElementSibling.firstElementChild; 
 
    } else { 
 
     if(!el.parentNode.nextElementSibling) { 
 
      return false; 
 
     } 
 
     var nextRow = el.parentNode.nextElementSibling; 
 
     if(!nextRow.firstElementChild.firstElementChild) { 
 
      nextInput(nextRow.firstElementChild); 
 
      return false; 
 
     } 
 
     var nextSibling = nextRow.firstElementChild.firstElementChild; 
 
    } 
 
    var nextType = nextSibling.tagName.toLowerCase(); 
 
    if(nextType !== "input") { 
 
     nextInput(nextSibling); 
 
     return false; 
 
    } 
 
    nextSibling.focus(); 
 
}

<table> 
 
    <tr> 
 
     <td>some text</td> 
 
     <td>some text</td> 
 
     <td><input type="text" maxlength="1" required></td> 
 
     <td><input type="text" maxlength="1" required></td> 
 
     <td><input type="text" maxlength="1" required></td> 
 
     <td><input type="text" maxlength="1" required></td> 
 
    </tr> 
 
    <tr> 
 
     <td>some text</td> 
 
     <td>some text</td> 
 
     <td><input type="text" maxlength="1" required></td> 
 
     <td><input type="text" maxlength="1" required></td> 
 
     <td><input type="text" maxlength="1" required></td> 
 
     <td><input type="text" maxlength="1" required></td> 
 
    </tr> 
 
</table>

來源

2015-07-03 19:11:16

-1

在這種情況下，我建議你擴大現在什麼東西被稱爲isNumber()函數的定義。將第二個參數傳遞給它，給出應該移動的控件的ID - 如果輸入是的一個數字。然後，在該子程序中，撤銷該事件，然後將setFocus轉換爲適當的「下一個控件」。每個onkeypress處理程序都會調用相同的例程，但使用不同的next-control-id參數，這樣每個控件都會將我們發送到正確的下一個。

我會勸你的：不要試着模擬按Tab鍵。

來源

2015-07-03 19:02:43

如果驗證函數返回true，則重點關注下一個元素

回答

相關問題