Utilizzare JavaScript per posizionare il cursore alla fine del testo nell'elemento di input di testo

Qual è il modo migliore (e presumo il modo più semplice) per posizionare il cursore alla fine del testo in un elemento di testo di input tramite JavaScript, dopo che lo stato attivo è stato impostato sull'elemento?

Ho affrontato lo stesso problema (dopo aver impostato il focus tramite RJS / prototipo) in IE. Firefox stava già lasciando il cursore alla fine quando c'è già un valore per il campo. IE stava forzando il cursore all'inizio del testo.

La soluzione a cui sono arrivato è la seguente:

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

Funziona in IE7 e FF3

C'è un modo semplice per farlo funzionare nella maggior parte dei browser.

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

Tuttavia, a causa delle stranezze * di alcuni browser, una risposta più inclusiva appare più simile a questa

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

Uso di jQuery (per impostare il listener, ma altrimenti non è necessario)

$('#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'>

Utilizzo di Vanilla JS ( addEventfunzione di prestito da questa risposta )

// 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 ha una strana stranezza in cui l'evento focus si attiva prima che il cursore venga spostato nel campo; che rovina la mia semplice soluzione. Due opzioni per risolvere questo problema:

1. È possibile aggiungere un timeout di 0 ms (per rinviare l'operazione fino a quando lo stack non è azzerato )
2. È possibile modificare l'evento da focusamouseup . Questo sarebbe piuttosto fastidioso per l'utente a meno che tu non abbia ancora tenuto traccia della messa a fuoco. Non sono davvero innamorato di nessuna di queste opzioni.

Inoltre, @vladkras ha sottolineato che alcune versioni precedenti di Opera calcolano erroneamente la lunghezza quando ha spazi. Per questo puoi usare un numero enorme che dovrebbe essere più grande della tua stringa.

Prova questo, ha funzionato per me:

//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.  

Affinché il cursore si sposti alla fine, l'input deve prima essere attivo, quindi quando il valore viene cambiato, andrà alla fine. Se imposti .value sullo stesso, non cambierà in Chrome.

Dopo averci provato un po 'con questo, ho scoperto che il modo migliore era usare il setSelectionRange funzione se il browser la supporta; in caso contrario, tornare a utilizzare il metodo nella risposta di Mike Berrow (ovvero sostituire il valore con se stesso).

Sto anche impostando scrollTopun valore elevato nel caso in cui ci troviamo in un ambiente a scorrimento verticale textarea. (L'uso di un valore elevato arbitrario sembra più affidabile di$(this).height() a Firefox e Chrome.)

L'ho realizzato come plug-in jQuery. (Se non stai usando jQuery, confido che puoi ancora ottenere l'essenza abbastanza facilmente.)

Ho testato in IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10.00.

È disponibile su jquery.com come plug-in PutCursorAtEnd . Per comodità, il codice per la versione 1.0 è il seguente:

// 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>  

Questa funzione funziona per me in IE9, Firefox 6.xe Opera 11.x

Ho provato quanto segue con un discreto successo in Chrome

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

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

Riduzione rapida:

Prende ogni campo di input con il focus della classe su di esso, quindi memorizza il vecchio valore del campo di input in una variabile, quindi applica la stringa vuota al campo di input.

Quindi attende 1 millisecondo e inserisce nuovamente il vecchio valore.

È il 2019 e nessuno dei metodi sopra ha funzionato per me, ma questo ha funzionato, preso da 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>

Semplice. Quando si modificano o si modificano i valori, mettere innanzitutto lo stato attivo, quindi impostare il valore.

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

Tuttavia è necessaria la variabile intermedia, (vedi var val =) altrimenti il ​​cursore si comporta in modo strano, ne abbiamo bisogno alla fine.

<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

Questo metodo aggiorna le proprietà HTMLInputElement.selectionStart, selectionEnd e selectionDirection in una chiamata.

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

In altri metodi js di -1solito significa (per) l'ultimo carattere. Questo è il caso anche per questo, ma non ho trovato riferimenti espliciti a questo comportamento nei documenti.

Per tutti i browser per tutti i casi:

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);
}

Timeout richiesto se è necessario spostare il cursore dal gestore eventi onFocus

Mi piace molto la risposta accettata, ma ha smesso di funzionare in Chrome. In Chrome, affinché il cursore finisca, il valore di input deve cambiare. La soluzione è la seguente:

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

In jQuery, questo è

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

Questo problema è interessante La cosa più confusa al riguardo è che nessuna soluzione trovata ha risolto completamente il problema.

+++++++ SOLUZIONE +++++++

1. Hai bisogno di una funzione JS, in questo modo:

   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. Devi chiamare questo ragazzo negli eventi onfocus e onclick.

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

FUNZIONA SU TUTTI I DISPOSITIVI EI BROWSER !!!!

Ho appena scoperto che in iOS, impostando la textarea.textContentproprietà posizionerai il cursore alla fine del testo nell'elemento textarea ogni volta. Il comportamento era un bug nella mia app, ma sembra essere qualcosa che potresti usare intenzionalmente.

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

Prendendo alcune delle risposte .. facendo un jquery a riga singola.

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

Se il campo di input necessita solo di un valore predefinito statico, di solito lo faccio con jQuery:

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

Questo sembra funzionare in tutti i browser.

Mentre questa potrebbe essere una vecchia domanda con molte risposte, ho riscontrato un problema simile e nessuna delle risposte era esattamente ciò che volevo e / o sono state spiegate male. Il problema con le proprietà selectionStart e selectionEnd è che non esistono per il numero del tipo di input (mentre è stata posta la domanda per il tipo di testo, penso che potrebbe aiutare gli altri che potrebbero avere altri tipi di input che devono mettere a fuoco). Quindi, se non sai se il tipo di input che la funzione focalizzerà è un numero di tipo o meno, non puoi usare quella soluzione.

La soluzione che funziona su più browser e per tutti i tipi di input è piuttosto semplice:

• ottenere e memorizzare il valore dell'input in una variabile
• focalizzare l'input
• imposta il valore dell'input sul valore memorizzato

In questo modo il cursore si trova alla fine dell'elemento di input.
Quindi tutto ciò che faresti è qualcosa del genere (usando jquery, a condizione che il selettore di elementi che si desidera mettere a fuoco sia accessibile tramite l'attributo di dati 'elemento-focus-elemento' dell'elemento cliccato e la funzione venga eseguita dopo aver fatto clic su '.foo' elemento):

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

Perché funziona? Semplicemente, quando viene chiamato .focus (), il focus verrà aggiunto all'inizio dell'elemento input (che qui è il problema principale), ignorando il fatto che l'elemento input ha già un valore in esso. Tuttavia, quando si modifica il valore di un input, il cursore si posiziona automaticamente alla fine del valore all'interno dell'elemento input. Pertanto, se si sovrascrive il valore con lo stesso valore che era stato precedentemente immesso nell'input, il valore apparirà intatto, ma il cursore si sposterà alla fine.

Prova questo funziona con JavaScript Vanilla.

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

In Js

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

Imposta il cursore quando fai clic sull'area di testo alla fine del testo ... La variazione di questo codice è ... ANCHE funziona! per Firefox, IE, Safari, Chrome ..

Nel codice lato server:

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

In 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();
 }

Se si imposta prima il valore e quindi lo stato attivo, il cursore apparirà sempre alla fine.

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

Ecco il violino per testare https://jsfiddle.net/5on50caf/1/

Volevo mettere il cursore alla fine di un elemento "div" dove contenteditable = true, e ho ottenuto una soluzione con il codice 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>

E questa funzione fa 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);
    }
}

Funziona bene per la maggior parte dei browser, si prega di controllare, questo codice mette il testo e mette a fuoco alla fine del testo nell'elemento div (non elemento di input)

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

Grazie Xeoncross

Ho anche affrontato lo stesso problema. Finalmente funzionerà per me:

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;

  });

};

Ecco come possiamo chiamarlo:

var searchInput = $("#searchInputOrTextarea");

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

Funziona per me in Safari, IE, Chrome, Mozilla. Sui dispositivi mobili non ho provato questo.

Controlla questa soluzione!

//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 (potrebbe essere necessario concentrarsi sull'elemento di input)

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

Ho provato i suggerimenti prima, ma nessuno ha funzionato per me (li ho testati in Chrome), quindi ho scritto il mio codice - e funziona benissimo in Firefox, IE, Safari, Chrome ...

In Textarea:

onfocus() = sendCursorToEnd(this);

In 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);}

Ecco una demo di jsFiddle della mia risposta. La demo utilizza CoffeeScript, ma è possibile convertirlo in JavaScript se necessario.

La parte importante, in JavaScript:

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

Sto postando questa risposta perché l'ho già scritta per qualcun altro che ha avuto la stessa domanda. Questa risposta non copre tutti i casi limite delle risposte principali qui, ma funziona per me e ha una demo di jsFiddle con cui puoi giocare.

Ecco il codice di jsFiddle, quindi questa risposta viene preservata anche se jsFiddle scompare:

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;
}

Prova il seguente codice:

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

Anche se sto rispondendo troppo tardi, ma per domande future, sarà utile. E funziona anche in contenteditablediv.

Da dove devi mettere a fuoco alla fine; scrivi questo codice

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

E la funzione è -

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();
    }
}