Utilisez JavaScript pour placer le curseur à la fin du texte dans l'élément de saisie de texte

Quelle est la meilleure façon (et je présume la plus simple) de placer le curseur à la fin du texte dans un élément de texte d'entrée via JavaScript - une fois que le focus a été défini sur l'élément?

J'ai rencontré ce même problème (après avoir défini le focus via RJS / prototype) dans IE. Firefox laissait déjà le curseur à la fin quand il y a déjà une valeur pour le champ. IE forçait le curseur au début du texte.

La solution à laquelle je suis parvenu est la suivante:

<input id="search" type="text" value="mycurrtext" size="30" 
       onfocus="this.value = this.value;" name="search"/>

Cela fonctionne à la fois dans IE7 et FF3

Il existe un moyen simple de le faire fonctionner dans la plupart des navigateurs.

this.selectionStart = this.selectionEnd = this.value.length;

Cependant, en raison des * bizarreries de quelques navigateurs, une réponse plus inclusive ressemble plus à ceci

setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);

Utilisation de jQuery (pour définir l'écouteur, mais ce n'est pas nécessaire sinon)

$('#el').focus(function(){
  var that = this;
  setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='el' type='text' value='put cursor at end'>

Utilisation de Vanilla JS ( addEventfonction d' emprunt de cette réponse )

// Basic cross browser addEvent
function addEvent(elem, event, fn){
if(elem.addEventListener){
  elem.addEventListener(event, fn, false);
}else{
  elem.attachEvent("on" + event,
  function(){ return(fn.call(elem, window.event)); });
}}
var element = document.getElementById('el');

addEvent(element,'focus',function(){
  var that = this;
  setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});

<input id='el' type='text' value='put cursor at end'>

Quirks

Chrome a une bizarrerie bizarre où l'événement focus se déclenche avant que le curseur ne soit déplacé dans le champ; ce qui fout ma solution simple. Deux options pour résoudre ce problème:

1. Vous pouvez ajouter un délai d'expiration de 0 ms (pour différer l'opération jusqu'à ce que la pile soit vide )
2. Vous pouvez changer l'événement de focusà mouseup. Ce serait assez ennuyeux pour l'utilisateur à moins que vous ne gardiez toujours le focus. Je ne suis pas vraiment amoureux de l'une de ces options.

En outre, @vladkras a souligné que certaines anciennes versions d'Opera calculent incorrectement la longueur lorsqu'il a des espaces. Pour cela, vous pouvez utiliser un nombre énorme qui devrait être plus grand que votre chaîne.

Essayez ceci, cela a fonctionné pour moi:

//input is the input element

input.focus(); //sets focus to element
var val = this.input.value; //store the value of the element
this.input.value = ''; //clear the value of the element
this.input.value = val; //set that value back.  

Pour que le curseur se déplace vers la fin, l'entrée doit d'abord avoir le focus, puis lorsque la valeur est modifiée, elle atteint la fin. Si vous définissez .value sur le même, il ne changera pas en chrome.

Après avoir piraté un peu cela, j'ai trouvé que la meilleure façon était d'utiliser la setSelectionRangefonction si le navigateur la supportait; sinon, revenez à l'utilisation de la méthode dans la réponse de Mike Berrow (c'est-à-dire remplacez la valeur par elle-même).

Je mets également scrollTopune valeur élevée au cas où nous serions dans un défilement vertical textarea. (L'utilisation d'une valeur élevée arbitraire semble plus fiable que $(this).height()dans Firefox et Chrome.)

Je l'ai fait comme un plugin jQuery. (Si vous n'utilisez pas jQuery, j'espère que vous pouvez toujours obtenir l'essentiel assez facilement.)

J'ai testé dans IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10.00.

Il est disponible sur jquery.com en tant que plugin PutCursorAtEnd . Pour votre commodité, le code de la version 1.0 est le suivant:

// jQuery plugin: PutCursorAtEnd 1.0
// http://plugins.jquery.com/project/PutCursorAtEnd
// by teedyay
//
// Puts the cursor at the end of a textbox/ textarea

// codesnippet: 691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4
(function($)
{
    jQuery.fn.putCursorAtEnd = function()
    {
    return this.each(function()
    {
        $(this).focus()

        // If this function exists...
        if (this.setSelectionRange)
        {
        // ... then use it
        // (Doesn't work in IE)

        // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
        var len = $(this).val().length * 2;
        this.setSelectionRange(len, len);
        }
        else
        {
        // ... otherwise replace the contents with itself
        // (Doesn't work in Google Chrome)
        $(this).val($(this).val());
        }

        // Scroll to the bottom, in case we're in a tall textarea
        // (Necessary for Firefox and Google Chrome)
        this.scrollTop = 999999;
    });
    };
})(jQuery);

<script type="text/javascript">  
    function SetEnd(txt) {  
      if (txt.createTextRange) {  
       //IE  
       var FieldRange = txt.createTextRange();  
       FieldRange.moveStart('character', txt.value.length);  
       FieldRange.collapse();  
       FieldRange.select();  
       }  
      else {  
       //Firefox and Opera  
       txt.focus();  
       var length = txt.value.length;  
       txt.setSelectionRange(length, length);  
      }  
    }   
</script>  

Cette fonction fonctionne pour moi dans IE9, Firefox 6.x et Opera 11.x

J'ai essayé ce qui suit avec un grand succès en chrome

$("input.focus").focus(function () {
    var val = this.value,
        $this = $(this);
    $this.val("");

    setTimeout(function () {
        $this.val(val);
    }, 1);
});

Résumé rapide:

Il prend chaque champ d'entrée avec le focus de classe dessus, puis stocke l'ancienne valeur du champ d'entrée dans une variable, puis il applique la chaîne vide au champ d'entrée.

Il attend ensuite 1 milliseconde et réintroduit l'ancienne valeur.

C'est 2019 et aucune des méthodes ci-dessus n'a fonctionné pour moi, mais celle-ci l'a fait, tirée de https://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/

function moveCursorToEnd(id) {
  var el = document.getElementById(id) 
  el.focus()
  if (typeof el.selectionStart == "number") {
      el.selectionStart = el.selectionEnd = el.value.length;
  } else if (typeof el.createTextRange != "undefined") {           
      var range = el.createTextRange();
      range.collapse(false);
      range.select();
  }
}

<input id="myinput" type="text" />
<a href="#" onclick="moveCursorToEnd('myinput')">Move cursor to end</a>

Facile. Lorsque vous modifiez ou modifiez des valeurs, mettez d'abord le focus puis définissez la valeur.

$("#catg_name").focus();
$("#catg_name").val(catg_name);

La variable intermédiaire est toujours nécessaire, (voir var val =) sinon le curseur se comporte bizarrement, nous en avons besoin à la fin.

<body onload="document.getElementById('userinput').focus();">
<form>
<input id="userinput" onfocus="var val=this.value; this.value=''; this.value= val;"
         class=large type="text" size="10" maxlength="50" value="beans" name="myinput">
</form>
</body>

el.setSelectionRange(-1, -1);

https://codesandbox.io/s/peaceful-bash-x2mti

Cette méthode met à jour les propriétés HTMLInputElement.selectionStart, selectionEnd et selectionDirection en un seul appel.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange

Dans d'autres méthodes js, cela -1signifie généralement (jusqu'au) dernier caractère. C'est également le cas pour celui-ci, mais je n'ai pas trouvé de mention explicite de ce comportement dans les documents.

Pour tous les navigateurs pour tous les cas:

function moveCursorToEnd(el) {
    window.setTimeout(function () {
            if (typeof el.selectionStart == "number") {
            el.selectionStart = el.selectionEnd = el.value.length;
        } else if (typeof el.createTextRange != "undefined") {
            var range = el.createTextRange();
            range.collapse(false);
            range.select();
        }
    }, 1);
}

Délai d'attente requis si vous devez déplacer le curseur du gestionnaire d'événements onFocus

J'aime beaucoup la réponse acceptée, mais elle ne fonctionne plus dans Chrome. Dans Chrome, pour que le curseur atteigne la fin, la valeur d'entrée doit changer. La solution est la suivante:

<input id="search" type="text" value="mycurrtext" size="30" 
   onfocus="var value = this.value; this.value = null; this.value = value;" name="search"/>

Dans jQuery, c'est

$(document).ready(function () {
  $('input').focus(function () {
    $(this).attr('value',$(this).attr('value'));
  }
}

Ce problème est intéressant. La chose la plus déroutante à ce sujet est qu'aucune solution que j'ai trouvée n'a résolu complètement le problème.

+++++++ SOLUTION +++++++

1. Vous avez besoin d'une fonction JS, comme ceci:

   function moveCursorToEnd(obj) {
   
     if (!(obj.updating)) {
       obj.updating = true;
       var oldValue = obj.value;
       obj.value = '';
       setTimeout(function(){ obj.value = oldValue; obj.updating = false; }, 100);
     }
   
   }

2. Vous devez appeler ce gars dans les événements onfocus et onclick.

   <input type="text" value="Test Field" onfocus="moveCursorToEnd(this)" onclick="moveCursorToEnd(this)">

IL FONCTIONNE SUR TOUS LES APPAREILS ET LES NAVIGATEURS !!!!

Je viens de découvrir que dans iOS, la définition de la textarea.textContentpropriété placera le curseur à la fin du texte dans l'élément textarea à chaque fois. Le comportement était un bogue dans mon application, mais semble être quelque chose que vous pourriez utiliser intentionnellement.

var valsrch = $('#search').val();
$('#search').val('').focus().val(valsrch);

Prendre certaines des réponses .. faire un jquery sur une seule ligne.

$('#search').focus().val($('#search').val());

Si le champ de saisie a juste besoin d'une valeur par défaut statique, je le fais généralement avec jQuery:

$('#input').focus().val('Default value');

Cela semble fonctionner dans tous les navigateurs.

Bien que cela puisse être une vieille question avec beaucoup de réponses, j'ai rencontré un problème similaire et aucune des réponses n'était tout à fait ce que je voulais et / ou était mal expliquée. Le problème avec les propriétés selectionStart et selectionEnd est qu'elles n'existent pas pour le numéro de type d'entrée (alors que la question a été posée pour le type de texte, je pense que cela pourrait aider d'autres personnes qui pourraient avoir d'autres types d'entrée sur lesquelles elles doivent se concentrer). Donc, si vous ne savez pas si le type d'entrée sur lequel la fonction se concentrera est un numéro de type ou non, vous ne pouvez pas utiliser cette solution.

La solution qui fonctionne sur plusieurs navigateurs et pour tous les types d'entrée est assez simple:

• obtenir et stocker la valeur de l'entrée dans une variable
• concentrer l'entrée
• définir la valeur d'entrée sur la valeur stockée

De cette façon, le curseur est à la fin de l'élément d'entrée.
Donc, tout ce que vous feriez est quelque chose comme ça (en utilisant jquery, à condition que le sélecteur d'élément que l'on souhaite concentrer soit accessible via l'attribut de données 'data-focus-element' de l'élément cliqué et que la fonction s'exécute après avoir cliqué sur '.foo' élément):

$('.foo').click(function() {
    element_selector = $(this).attr('data-focus-element');
    $focus = $(element_selector);
    value = $focus.val();
    $focus.focus();
    $focus.val(value);
});

Pourquoi ça marche? Simplement, lorsque le .focus () est appelé, le focus sera ajouté au début de l'élément d'entrée (qui est le problème principal ici), en ignorant le fait que l'élément d'entrée a déjà une valeur. Cependant, lorsque la valeur d'une entrée est modifiée, le curseur est automatiquement placé à la fin de la valeur à l'intérieur de l'élément d'entrée. Donc, si vous remplacez la valeur par la même valeur qui avait été précédemment entrée dans l'entrée, la valeur ne sera pas modifiée, le curseur se déplacera cependant à la fin.

Essayez celui-ci fonctionne avec Vanilla JavaScript.

<input type="text" id="yourId" onfocus=" let value = this.value; this.value = null; this.value=value" name="nameYouWant" class="yourClass" value="yourValue" placeholder="yourPlaceholder...">

Dans Js

document.getElementById("yourId").focus()

Placez le curseur lorsque vous cliquez sur la zone de texte à la fin du texte ... La variation de ce code est ... fonctionne également! pour Firefox, IE, Safari, Chrome ..

En code côté serveur:

txtAddNoteMessage.Attributes.Add("onClick", "sendCursorToEnd('" & txtAddNoteMessage.ClientID & "');")

En Javascript:

function sendCursorToEnd(obj) {
    var value =  $(obj).val(); //store the value of the element
    var message = "";
    if (value != "") {
        message = value + "\n";
     };
    $(obj).focus().val(message);
    $(obj).unbind();
 }

Si vous définissez d'abord la valeur, puis définissez le focus, le curseur apparaîtra toujours à la fin.

$("#search-button").click(function (event) {
    event.preventDefault();
    $('#textbox').val('this');
    $("#textbox").focus();
    return false;
});

Voici le violon à tester https://jsfiddle.net/5on50caf/1/

Je voulais placer le curseur à la fin d'un élément "div" où contenteditable = true, et j'ai obtenu une solution avec le code Xeoncross :

<input type="button" value="Paste HTML" onclick="document.getElementById('test').focus(); pasteHtmlAtCaret('<b>INSERTED</b>'); ">

<div id="test" contenteditable="true">
    Here is some nice text
</div>

Et cette fonction fait de la magie:

 function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

Fonctionne bien pour la plupart des navigateurs, veuillez le vérifier, ce code place le texte et place le focus à la fin du texte dans l'élément div (pas l'élément d'entrée)

https://jsfiddle.net/Xeoncross/4tUDk/

Merci, Xeoncross

J'ai également rencontré le même problème. Enfin ça va marcher pour moi:

jQuery.fn.putCursorAtEnd =  = function() {

  return this.each(function() {

    // Cache references
    var $el = $(this),
        el = this;

    // Only focus if input isn't already
    if (!$el.is(":focus")) {
     $el.focus();
    }

    // If this function exists... (IE 9+)
    if (el.setSelectionRange) {

      // Double the length because Opera is inconsistent about whether a carriage return is one character or two.
      var len = $el.val().length * 2;

      // Timeout seems to be required for Blink
      setTimeout(function() {
        el.setSelectionRange(len, len);
      }, 1);

    } else {

      // As a fallback, replace the contents with itself
      // Doesn't work in Chrome, but Chrome supports setSelectionRange
      $el.val($el.val());

    }

    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Chrome)
    this.scrollTop = 999999;

  });

};

Voici comment nous pouvons appeler cela:

var searchInput = $("#searchInputOrTextarea");

searchInput
  .putCursorAtEnd() // should be chainable
  .on("focus", function() { // could be on any event
    searchInput.putCursorAtEnd()
  });

Cela fonctionne pour moi dans safari, IE, Chrome, Mozilla. Sur les appareils mobiles, je n'ai pas essayé cela.

Vérifiez cette solution!

//fn setCurPosition
$.fn.setCurPosition = function(pos) {
    this.focus();
    this.each(function(index, elem) {
        if (elem.setSelectionRange) {
            elem.setSelectionRange(pos, pos);
        } else if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    });
    return this;
};

// USAGE - Set Cursor ends
$('#str1').setCurPosition($('#str1').val().length);

// USAGE - Set Cursor at 7 position
// $('#str2').setCurPosition(7);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Set cursor at any position</p>
<p><input type="text" id="str1" value="my string here" /></p>
<p><input type="text" id="str2" value="my string here" /></p>

Super facile (vous devrez peut-être vous concentrer sur l'élément d'entrée)

inputEl = getElementById('inputId');
var temp = inputEl.value;
inputEl.value = '';
inputEl.value = temp;

J'ai essayé les suggestions avant mais aucune n'a fonctionné pour moi (les ai testées dans Chrome), j'ai donc écrit mon propre code - et cela fonctionne très bien dans Firefox, IE, Safari, Chrome ...

Dans Textarea:

onfocus() = sendCursorToEnd(this);

En Javascript:

function sendCursorToEnd(obj) { 
var value = obj.value; //store the value of the element
var message = "";
if (value != "") {
    message = value + "\n";
};
$(obj).focus().val(message);}

Voici une démo jsFiddle de ma réponse. La démo utilise CoffeeScript, mais vous pouvez le convertir en JavaScript simple si vous en avez besoin.

La partie importante, en JavaScript:

var endIndex = textField.value.length;
if (textField.setSelectionRange) {
   textField.setSelectionRange(endIndex, endIndex);
}

Je poste cette réponse parce que je l'ai déjà écrite pour quelqu'un d'autre qui avait la même question. Cette réponse ne couvre pas autant de cas marginaux que les meilleures réponses ici, mais elle fonctionne pour moi et a une démo jsFiddle avec laquelle vous pouvez jouer.

Voici le code du jsFiddle, donc cette réponse est conservée même si le jsFiddle disparaît:

moveCursorToEnd = (textField) ->
  endIndex = textField.value.length
  if textField.setSelectionRange
    textField.setSelectionRange(endIndex, endIndex)

jQuery ->
  $('.that-field').on 'click', ->
    moveCursorToEnd(this)

<div class="field">
    <label for="pressure">Blood pressure</label>:
    <input class="that-field" type="text" name="pressure" id="pressure" value="24">
</div>
<p>
    Try clicking in the text field. The cursor will always jump to the end.
</p>

body {
    margin: 1em;
}

.field {
    margin-bottom: 1em;
}

Essayez le code suivant:

$('input').focus(function () {
    $(this).val($(this).val());
}).focus()

Bien que je réponde trop tard, mais pour une future requête, ce sera utile. Et ça marche aussi danscontenteditable div.

D'où vous devez définir le focus à la fin; écrire ce code-

var el = document.getElementById("your_element_id");
placeCaretAtEnd(el);

Et la fonction est -

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}