Autofocus position the cursor at the end

7

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?

    
asked by anonymous 12.04.2018 / 14:30

5 answers

2

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 .

    
12.04.2018 / 14:58
1

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"/>
    
12.04.2018 / 14:41
0

One suggestion:

<form>
    <div>
        <input type="text" name="p" autofocus value="teste" onfocus="this.value = this.value;"/>
    </div>
</form>
    
12.04.2018 / 14:36
0

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>

link

    
12.04.2018 / 14:41
0

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>
    
12.04.2018 / 15:14