jQuery Imposta la posizione del cursore nell'area di testo

Come si imposta la posizione del cursore in un campo di testo usando jQuery? Ho un campo di testo con contenuti e voglio che il cursore degli utenti sia posizionato su un certo offset quando si concentrano sul campo. Il codice dovrebbe apparire in questo modo:

$('#input').focus(function() {
  $(this).setCursorPosition(4);
});

Come sarebbe l'implementazione di quella funzione setCursorPosition? Se avessi un campo di testo con il contenuto abcdefg, questa chiamata comporterebbe il posizionamento del cursore come segue: abcd ** | ** efg.

Java ha una funzione simile, setCaretPosition. Esiste un metodo simile per javascript?

Aggiornamento: ho modificato il codice CMS per funzionare con jQuery come segue:

new function($) {
  $.fn.setCursorPosition = function(pos) {
    if (this.setSelectionRange) {
      this.setSelectionRange(pos, pos);
    } else if (this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      if(pos < 0) {
        pos = $(this).val().length + pos;
      }
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }
}(jQuery);

Ho due funzioni:

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

Quindi puoi usare setCaretToPos in questo modo:

setCaretToPos(document.getElementById("YOURINPUT"), 4);

Esempio live con a textareae an input, che mostra l'uso di jQuery:

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  } else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos(input, pos) {
  setSelectionRange(input, pos, pos);
}

$("#set-textarea").click(function() {
  setCaretToPos($("#the-textarea")[0], 10)
});
$("#set-input").click(function() {
  setCaretToPos($("#the-input")[0], 10);
});

<textarea id="the-textarea" cols="40" rows="4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<br><input type="button" id="set-textarea" value="Set in textarea">
<br><input id="the-input" type="text" size="40" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
<br><input type="button" id="set-input" value="Set in input">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

A partire dal 2016, testato e funzionante su Chrome, Firefox, IE11, persino IE8 (vedi l'ultimo qui ; Stack Snippet non supporta IE8).

Ecco una soluzione jQuery:

$.fn.selectRange = function(start, end) {
    if(end === undefined) {
        end = start;
    }
    return this.each(function() {
        if('selectionStart' in this) {
            this.selectionStart = start;
            this.selectionEnd = end;
        } else if(this.setSelectionRange) {
            this.setSelectionRange(start, end);
        } else if(this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

Con questo, puoi farlo

$('#elem').selectRange(3,5); // select a range of text
$('#elem').selectRange(3); // set cursor position

• JsFiddle
• JsBin

Le soluzioni qui sono esatte tranne il codice di estensione jQuery.

La funzione di estensione dovrebbe iterare su ogni elemento selezionato e tornare thisa supportare il concatenamento. Ecco l' una versione corretta:

$.fn.setCursorPosition = function(pos) {
  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;
};

Ho trovato una soluzione che funziona per me:

$.fn.setCursorPosition = function(position){
    if(this.length == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    if(this.length == 0) return this;
    var input = this[0];

    if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    } else if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);
    }

    return this;
}

$.fn.focusEnd = function(){
    this.setCursorPosition(this.val().length);
            return this;
}

Ora puoi spostare lo stato attivo alla fine di qualsiasi elemento chiamando:

$(element).focusEnd();

Oppure si specifica la posizione.

$(element).setCursorPosition(3); // This will focus on the third character.

Questo ha funzionato per me su Safari 5 su Mac OSX, jQuery 1.4:

$("Selector")[elementIx].selectionStart = desiredStartPos; 
$("Selector")[elementIx].selectionEnd = desiredEndPos;

Mi rendo conto che questo è un post molto vecchio, ma ho pensato che avrei dovuto offrire forse una soluzione più semplice per aggiornarlo usando solo jQuery.

function getTextCursorPosition(ele) {   
    return ele.prop("selectionStart");
}

function setTextCursorPosition(ele,pos) {
    ele.prop("selectionStart", pos + 1);
    ele.prop("selectionEnd", pos + 1);
}

function insertNewLine(text,cursorPos) {
    var firstSlice = text.slice(0,cursorPos);
    var secondSlice = text.slice(cursorPos);

    var new_text = [firstSlice,"\n",secondSlice].join('');

    return new_text;
}

Utilizzo per l'uso di ctrl-invio per aggiungere una nuova riga (come in Facebook):

$('textarea').on('keypress',function(e){
    if (e.keyCode == 13 && !e.ctrlKey) {
        e.preventDefault();
        //do something special here with just pressing Enter
    }else if (e.ctrlKey){
        //If the ctrl key was pressed with the Enter key,
        //then enter a new line break into the text
        var cursorPos = getTextCursorPosition($(this));                

        $(this).val(insertNewLine($(this).val(), cursorPos));
        setTextCursorPosition($(this), cursorPos);
    }
});

Sono aperto alla critica. Grazie.

AGGIORNAMENTO: Questa soluzione non consente il normale funzionamento di copia e incolla (ad es. Ctrl-c, ctrl-v), quindi dovrò modificarlo in futuro per assicurarmi che la parte funzioni di nuovo. Se hai un'idea di come farlo, ti preghiamo di commentare qui, e sarò felice di provarlo. Grazie.

In IE per spostare il cursore su qualche posizione questo codice è sufficiente:

var range = elt.createTextRange();
range.move('character', pos);
range.select();

Sto usando questo: http://plugins.jquery.com/project/jCaret

Impostare lo stato attivo prima di aver inserito il testo nell'area di testo così?

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

Questo funziona per me in Chrome

$('#input').focus(function() {
    setTimeout( function() {
        document.getElementById('input').selectionStart = 4;
        document.getElementById('input').selectionEnd = 4;
    }, 1);
});

Apparentemente hai bisogno di un ritardo di un microsecondo o più, perché di solito un utente si concentra sul campo di testo facendo clic in una posizione nel campo di testo (o colpendo la scheda) che vuoi sovrascrivere, quindi devi aspettare fino a quando la posizione è impostato dall'utente fare clic e quindi modificarlo.

Ricorda di restituire false subito dopo la chiamata di funzione se stai usando i tasti freccia poiché Chrome agita diversamente.

{
    document.getElementById('moveto3').setSelectionRange(3,3);
    return false;
}

Sulla base di questa domanda , la risposta non funzionerà perfettamente per ie e opera quando c'è una nuova riga nell'area di testo. La risposta spiega come regolare selectionStart, selectionEnd prima di chiamare setSelectionRange.

Ho provato a regolareOffOff dall'altra domanda con la soluzione proposta da @AVProgrammer e funziona.

function adjustOffset(el, offset) {
    /* From https://stackoverflow.com/a/8928945/611741 */
    var val = el.value, newOffset = offset;
    if (val.indexOf("\r\n") > -1) {
        var matches = val.replace(/\r\n/g, "\n").slice(0, offset).match(/\n/g);
        newOffset += matches ? matches.length : 0;
    }
    return newOffset;
}

$.fn.setCursorPosition = function(position){
    /* From https://stackoverflow.com/a/7180862/611741 */
    if(this.lengh == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    /* From https://stackoverflow.com/a/7180862/611741 
       modified to fit https://stackoverflow.com/a/8928945/611741 */
    if(this.lengh == 0) return this;
    input = this[0];

    if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    } else if (input.setSelectionRange) {
        input.focus();
        selectionStart = adjustOffset(input, selectionStart);
        selectionEnd = adjustOffset(input, selectionEnd);
        input.setSelectionRange(selectionStart, selectionEnd);
    }

    return this;
}

$.fn.focusEnd = function(){
    /* From https://stackoverflow.com/a/7180862/611741 */
    this.setCursorPosition(this.val().length);
}

Piccola modifica al codice che ho trovato in bitbucket

Il codice è ora in grado di selezionare / evidenziare con i punti di inizio / fine se vengono fornite 2 posizioni. Testato e funziona bene in FF / Chrome / IE9 / Opera.

$('#field').caret(1, 9);

Il codice è elencato di seguito, sono cambiate solo alcune righe:

(function($) {
  $.fn.caret = function(pos) {
    var target = this[0];
    if (arguments.length == 0) { //get
      if (target.selectionStart) { //DOM
        var pos = target.selectionStart;
        return pos > 0 ? pos : 0;
      }
      else if (target.createTextRange) { //IE
        target.focus();
        var range = document.selection.createRange();
        if (range == null)
            return '0';
        var re = target.createTextRange();
        var rc = re.duplicate();
        re.moveToBookmark(range.getBookmark());
        rc.setEndPoint('EndToStart', re);
        return rc.text.length;
      }
      else return 0;
    }

    //set
    var pos_start = pos;
    var pos_end = pos;

    if (arguments.length > 1) {
        pos_end = arguments[1];
    }

    if (target.setSelectionRange) //DOM
      target.setSelectionRange(pos_start, pos_end);
    else if (target.createTextRange) { //IE
      var range = target.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos_end);
      range.moveStart('character', pos_start);
      range.select();
    }
  }
})(jQuery)

Ho dovuto farlo funzionare per elementi contenti e jQuery e pensavo che qualcuno potesse volerlo pronto per l'uso:

$.fn.getCaret = function(n) {
    var d = $(this)[0];
    var s, r;
    r = document.createRange();
    r.selectNodeContents(d);
    s = window.getSelection();
    console.log('position: '+s.anchorOffset+' of '+s.anchorNode.textContent.length);
    return s.anchorOffset;
};

$.fn.setCaret = function(n) {
    var d = $(this)[0];
    d.focus();
    var r = document.createRange();
    var s = window.getSelection();
    r.setStart(d.childNodes[0], n);
    r.collapse(true);
    s.removeAllRanges();
    s.addRange(r);
    console.log('position: '+s.anchorOffset+' of '+s.anchorNode.textContent.length);
    return this;
};

L'utilizzo $(selector).getCaret()restituisce l'offset numerico, $(selector).setCaret(num)stabilisce l'offset e imposta lo stato attivo sull'elemento.

Anche un piccolo suggerimento, se si esegue $(selector).setCaret(num)dalla console, verrà restituito console.log ma non verrà visualizzato lo stato attivo poiché è stato stabilito nella finestra della console.

Bests; D

È possibile modificare direttamente il prototipo se setSelectionRange non esiste.

(function() {
    if (!HTMLInputElement.prototype.setSelectionRange) {
        HTMLInputElement.prototype.setSelectionRange = function(start, end) {
            if (this.createTextRange) {
                var range = this.createTextRange();
                this.collapse(true);
                this.moveEnd('character', end);
                this.moveStart('character', start);
                this.select();
            }
        }
    }
})();
document.getElementById("input_tag").setSelectionRange(6, 7);

Collegamento jsFiddle