如何使用javascript聚焦html文本域?

时间:2022-07-27 17:02:47

HI guys, can somebody tell me how to focus the html textfield using javascript? I am a total novice in programming and just starting to learn. I have here the code in which I want to set the cursor in the textfield.

嗨伙计们,有人可以告诉我如何使用javascript聚焦html文本域吗?我是编程的新手,刚刚开始学习。我在这里有我想在文本字段中设置光标的代码。

test.html

<html>
<head>
<script type='text/javascript'>
 function parseTest() {
  var elem_1 = document.getElementById('input_1');
  var elem_2 = document.getElementById('input_2');

  var inp_1 = elem_1.value;
  var inp_2 = elem_2.value;

  if (inp_1 == "" && inp_2 == "") {
   alert("You need to enter integers!!!");
   elem_1.focus();
  }else if (inp_1 == ""){
   alert("You need to enter Integer 1!!!");
   elem_1.focus();
  }else if (inp_2 == ""){
   alert("You need to enter Integer 2!!!");
   elem_2.focus();
  }else {
   if (!parseInt(inp_1) || !parseInt(inp_2)) alert ("Enter Integers only!!!");
   else alert("Correct Inputs!!!");
  } 
 }
</script>
</head>

<body>
 <form name="myform">
  <input type="text" id="input_1" name="input_1" /><br />
  <input type="text" id="input_2" name="input_2" /><br />
  <input type="submit" value="Check!" onclick="parseTest();" />
 </form>
</body>
</html>

I am a total novice so pls be patient. Pls help...

我是一个新手,所以请耐心等待。请帮忙......

2 个解决方案

#1


4  

This code does that - however, right afterwards, it submits the form and redisplays the page, that's why you don't see the focus happening.

这段代码确实如此 - 但是,之后,它提交表单并重新显示页面,这就是为什么你没有看到焦点发生的原因。

Simply add a return false; to your function call in onclick, like so:

只需添加一个返回false;你的函数调用onclick,就像这样:

<input type="submit" value="Check!" onclick="parseTest(); return false;" />

#2


1  

In fact, you dont want to submit after each button click.
You can do it another way:
1. If you want just check input, without subiting the form: use "button" input type

事实上,您不希望在每次点击按钮后提交。您可以采用另一种方式:1。如果您只想检查输入,而不需要使用表单:使用“按钮”输入类型

<input type="button" value="Check!" onclick="parseTest();" /> 

2. if you want submit if all is correct: use it like this:

2.如果你想要提交,如果一切正确:像这样使用:

    <html>
    <head>
    <script type='text/javascript'>
     function parseTest() {
      var elem_1 = document.getElementById('input_1');
      var elem_2 = document.getElementById('input_2');

      var inp_1 = elem_1.value;
      var inp_2 = elem_2.value;

      if (inp_1 == "" && inp_2 == "") {
       alert("You need to enter integers!!!");
       elem_1.focus();
      }else if (inp_1 == ""){
       alert("You need to enter Integer 1!!!");
       elem_1.focus();
      }else if (inp_2 == ""){
       alert("You need to enter Integer 2!!!");
       elem_2.focus();
      }else {
       if (!parseInt(inp_1) || !parseInt(inp_2)) alert ("Enter Integers only!!!");
       else 
       {
          alert("Correct Inputs!!!");
          return true;
       }
      } 
      return false;
     }
    </script>
    </head>

    <body>
     <form name="myform">
      <input type="text" id="input_1" name="input_1" /><br />
      <input type="text" id="input_2" name="input_2" /><br />
      <input type="submit" value="Check!" onclick="return parseTest();" />
     </form>
    </body>
    </html>

#1


4  

This code does that - however, right afterwards, it submits the form and redisplays the page, that's why you don't see the focus happening.

这段代码确实如此 - 但是,之后,它提交表单并重新显示页面,这就是为什么你没有看到焦点发生的原因。

Simply add a return false; to your function call in onclick, like so:

只需添加一个返回false;你的函数调用onclick,就像这样:

<input type="submit" value="Check!" onclick="parseTest(); return false;" />

#2


1  

In fact, you dont want to submit after each button click.
You can do it another way:
1. If you want just check input, without subiting the form: use "button" input type

事实上,您不希望在每次点击按钮后提交。您可以采用另一种方式:1。如果您只想检查输入,而不需要使用表单:使用“按钮”输入类型

<input type="button" value="Check!" onclick="parseTest();" /> 

2. if you want submit if all is correct: use it like this:

2.如果你想要提交,如果一切正确:像这样使用:

    <html>
    <head>
    <script type='text/javascript'>
     function parseTest() {
      var elem_1 = document.getElementById('input_1');
      var elem_2 = document.getElementById('input_2');

      var inp_1 = elem_1.value;
      var inp_2 = elem_2.value;

      if (inp_1 == "" && inp_2 == "") {
       alert("You need to enter integers!!!");
       elem_1.focus();
      }else if (inp_1 == ""){
       alert("You need to enter Integer 1!!!");
       elem_1.focus();
      }else if (inp_2 == ""){
       alert("You need to enter Integer 2!!!");
       elem_2.focus();
      }else {
       if (!parseInt(inp_1) || !parseInt(inp_2)) alert ("Enter Integers only!!!");
       else 
       {
          alert("Correct Inputs!!!");
          return true;
       }
      } 
      return false;
     }
    </script>
    </head>

    <body>
     <form name="myform">
      <input type="text" id="input_1" name="input_1" /><br />
      <input type="text" id="input_2" name="input_2" /><br />
      <input type="submit" value="Check!" onclick="return parseTest();" />
     </form>
    </body>
    </html>