When I generate a input having a set value ( value="teste" ) and set the autofocus="true" , the autofocus returns the cursor at the beginning of the content:
<form>
<div>
<input type="text" name="p" value="teste" autofocus="true"/>
</div>
</form> Is there a default form of html that arrows the cursor at the end?
The solution alternative I know not is only with HTML , it also uses JavaScript .
Unlike other solutions, you can manipulate the cursor without overwriting the value, using the setSelectionRange ( ) :
The
métodoHTMLInputElement.setSelectionRange()defines the positions start and end of the current selection of the text in a<input>element.
Example 1:
<form>
<div>
<input type="text" name="p" value="teste"
onfocus="this.selectionStart = this.selectionEnd = this.value.length;"
autofocus="true"/>
</div>
</form>Example 2:
var campo = document.getElementById("p");
var tamanho = campo.value.length;
campo.setSelectionRange(tamanho, tamanho);<form>
<div>
<input type="text" name="p" id="p" value="teste" autofocus="true"/>
</div>
</form>Note:
Considering the possible number of digits in a <input /> , avoid assigning selectionEnd a constant value unless you know maxlength .
You can store the current value in a temporary variable, then set the value to empty, and then set again for the temporary variable.
Example:
<input type="text" name="p" autofocus value="teste" onfocus="var temp=this.value; this.value=''; this.value=temp"/>One suggestion:
<form>
<div>
<input type="text" name="p" autofocus value="teste" onfocus="this.value = this.value;"/>
</div>
</form>
var input = document.querySelector('input');
input.addEventListener('click', function() {
this.value = this.value;
});.myinput
{
padding: 5px;
margin:5px;
}
form{
margin:10px;
}
.mysubmit
{
float:right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<div class="container">
<form>
First name: <input class="col-sm-12 myinput"type="text" name="p" autofocus value="meu nome"><br>
<input class="col-sm-3 mysubmit" type="submit">
</form>
</div>The autofocus attribute is a Boolean attribute.
When present, specifies that an element should automatically get focus when the page loads.
<form>
First name: <input type="text" name="p" autofocus><br>
<input type="submit">
</form>
I believe that using only html can not move the cursor to the end of the text by focusing on input , it follows solution with jQuery :
var input = $("#teste");
tmp = input.val(); input.focus().val("").blur().focus().val(tmp);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><inputtype="text" name="p" value="teste" id="teste">
</div>