Question

Noob here ..我正在尝试根据以下标准自动聚焦字段：当字段包含预定义的输入长度时，它必须自动聚焦下一个字段。

＆＃13;

<html>
<body>
	<input type="number" id="box1" autofocus="autofocus" onkeyup='checkInput()'> - <input type="number" id="box2"onkeyup='checkInput()'> - <input type="number" id="box3"onkeyup='checkInput()'>
	<script type="text/javascript">
		function checkInput(){
			if(parseInt(document.getElementById('box1').value.length) == 3)
				document.getElementById('box2').focus();
		}



	</script>
</body>
</html>

＆＃13;

我总是可以编写很多函数并手动选择下一个字段。但是有没有办法只使用JS函数，将this.id作为参数传递给该函数？

Answer 1

将当前输入元素的id传递给checkInput()函数，正如您在普通的javaScript中所做的那样，而不是使用jQuery，您可以使用nextElementSibling获取下一个元素的属性，然后使用.focus()关注它，如下所示：

function checkInput(id) {
		  if (parseInt(document.getElementById(id).value.length) == 3)
		    var nextSibling = document.getElementById(id).nextElementSibling;
		  if (nextSibling) {
		    nextSibling.focus();
		  }
		}

<html>

<body>
  <input type="numbers" id="box1" autofocus="autofocus" onkeyup='checkInput("box1")'>-
  <input type="numbers" id="box2" onkeyup='checkInput("box2")'>-
  <input type="numbers" id="box3" onkeyup='checkInput("box3")'>

</body>

</html>

Answer 2

使用jquery选择所有输入，然后在长度大于3时选择下一个输入。

$(document).ready(()=>{
  $('input').on('keyup',(event)=>{
      console.log(event.target.value.length);
      if(event.target.value.length == 3){
        $(event.target).next().focus();
      }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
	<input type="numbers" id="box1" autofocus="autofocus" > - <input type="numbers" id="box2"> - <input type="numbers" id="box3">

</body>
</html>

使用单个JavaScript函数聚焦后续字段

2 个答案: