Position the cursor at the far right of the input box to implement the Code-basics

This scenario is often required in the front-end development process. Use the JS implementation to position the cursor at the far right of the input box.

Scene One: Edit the descriptive text of the picture

Scenario Two : Script.aculo.us's Ajax.inplaceeditor class. Double-click to edit, and leave after editing to automatically update the area.

The above scenario requires a JS implementation to position the cursor at the far right of the input box, but not through the mouse point into the input box.

We know that the most basic approach is to htmlelement the focus approach. As follows

Copy Code code as follows:

<p>
<input type= "text" value= "Hello"/>
</p>
<script>
var input = document.getelementsbytagname (' input ') [0];
Input.focus ();
</script>

　

Opening the page will reveal that the cursor is at the left of the input box. The effect is as follows

And now it's going to take three steps to position the cursor at the far right of the input box.

1, call the focus method

2,value assignment is null

3, the value of the previous input is then assigned to yourself

Copy Code code as follows:

<p>
<input type= "text" value= "Hello"/>
</p>
<script>
var input = document.getelementsbytagname (' input ') [0];
var val = input.value;
Input.focus ();
Input.value = ';
Input.value = val;
</script>

After the effect is shown, the cursor is at the far right of the drill box