Javascript focus textbox when the web page is loaded and remove focus from textbox

For a web page used to submit content, there are usually multiple textboxes. When the web page is loaded, you want to focus on one or the first textbox, that is, you can directly enter on the textbox without clicking. Reduce one operation, this is a good performance of user experience.

In addition to focus on textbox when the web page is loaded, it is also very necessary to focus the textbox after the user input error. It does not require the user to click the textbox again to focus, you can immediately enter again. Usually when a user enters a password or a verification code, it is particularly easy to make a mistake. Sometimes it may be wrong several times. It is more troublesome to focus every time.

The textbox cannot be focused by itself. It needs to be operated with javascript code. In fact, it is very simple, only need a sentence of code to complete the focus. But there is one thing to note, the focus of the textbox needs to be distinguished from the execution event after the textbox is focused, that is, the attribute onfocus of the textbox.

1. Javascript focus textbox when the web page is loaded

Html code:

<div>
              Product name: <input type="text" id="onfocusId" />
              Product price: <input type="text" id="price" />
       </div>

Javascript code:

<script type="text/javascript">
              var obj = document.getElementById("onfocusId");
              obj.focus();
       </script>

The above example only lists two textboxes, no matter how many textboxes, there can only be one focus at a time. The focused javascript code is very simple, first get the textbox to be focused by id, then focus. However, it is important to note that the javascript code must be placed behind the textbox when the page is loaded, otherwise an error will occur because the textbox cannot be found.

2. Javascript focus textbox after the user input error is cleared

In daily use, the password and verification code are the easiest to enter incorrectly, and you may also enter the wrong number several times in a row. After each wrong input, you need to click the textbox. The user experience is not very good, so it is necessary to automatically focus.

Html code:

<div>
              Username: <input type="text" id="nameId" />
              Password: <input type="password" id="passwordId" onblur="CheckPassword()" />
       </div>

Javascript code:

<script type="text/javascript">
       function CheckPassword() {
              var obj = document.getElementById("passwordId");
              if (obj.value != 1) {
                     obj.value = "";
                     obj.focus();
              }
       }
       </script>

The above code assumes that the password input is not 1, it is wrong; click on any blank space to trigger the focus event CheckPassword(), then clear the textbox, and then focus on waiting for the user to enter again.

3. How to remove focus from textbox in javascript

Html code:

<div>
              Cellphone number: <input type="text" id="mobleId" />
       </div>

Javascript code:

<script type="text/javascript">
       function RemoveFocusFromTextbox() {
              var obj = document.getElementById("mobleId");
              obj.blur();
       }
       RemoveFocusFromTextbox();//Call
       </script>