Autofocus: position the cursor at the end of the value

Question

When I Gero a input having set value (value="teste") and define the autofocus="true", the autofocus back the cursor at the beginning of the content:

<form>
	<div>
		<input type="text" name="p" value="teste"  autofocus="true"/>
	</div>
</form>

There is a standard form of html who arrow the cursor at the end ?

Answer 1

The alternative solution I know nay is only with HTML, she also uses the Javascript.

Unlike the other solutions in it I manipulate the cursor without overriding the value, using the setSelectionRange():

The métodoHTMLInputElement.setSelectionRange() defines the positions initial and final selection of the current text in an element <input>.

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>

Obs.:

Considering the possible amount of digits in a <input /> avoid attributing to selectionEnd a constant value unless you know the maxlength.

Answer 2

You can store the value current in a temporary variable, then set the value to empty, and then set again to the temporary variable.

Example:

<input type="text" name="p" autofocus value="teste" onfocus="var temp=this.value; this.value=''; this.value=temp"/>

Answer 3

A suggestion:

<form>
    <div>
        <input type="text" name="p" autofocus value="teste" onfocus="this.value = this.value;"/>
    </div>
</form>

Answer 4

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>
<link rel="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 the focus when the page is loaded.

<form>
  First name: <input type="text" name="p" autofocus><br>
  <input type="submit">
</form>

https://www.w3schools.com/tags/att_input_autofocus.asp

Answer 5

I believe using exclusively html cannot move the cursor to the end of the text by focusing on the input, 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>
  <input type="text" name="p" value="teste" id="teste">
</div>