jQuery Mengatur Posisi Kursor di Area Teks

Bagaimana Anda mengatur posisi kursor dalam bidang teks menggunakan jQuery? Saya punya bidang teks dengan konten, dan saya ingin kursor pengguna diposisikan pada offset tertentu ketika mereka fokus pada bidang tersebut. Kode akan terlihat seperti ini:

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

Seperti apa penerapan fungsi setCursorPosition itu? Jika Anda memiliki bidang teks dengan konten abcdefg, panggilan ini akan mengakibatkan kursor diposisikan sebagai berikut: abcd ** | ** efg.

Java memiliki fungsi serupa, setCaretPosition. Apakah ada metode serupa untuk javascript?

Pembaruan: Saya memodifikasi kode CMS agar berfungsi dengan jQuery sebagai berikut:

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

Saya memiliki dua fungsi:

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

Kemudian Anda dapat menggunakan setCaretToPos seperti ini:

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

Contoh langsung dengan a textareadan a input, menunjukkan penggunaan dari 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>

Pada 2016, diuji dan bekerja di Chrome, Firefox, IE11, bahkan IE8 (lihat yang terakhir di sini ; Cuplikan Stack tidak mendukung IE8).

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

Dengan ini, Anda bisa melakukannya

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

• JsFiddle
• JsBin

Solusi di sini benar kecuali untuk kode ekstensi jQuery.

Fungsi ekstensi harus beralih pada setiap elemen yang dipilih dan kembali thiske rantai dukungan. Berikut ini yang merupakan versi yang benar:

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

Saya menemukan solusi yang berfungsi untuk saya:

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

Sekarang Anda dapat memindahkan fokus ke akhir elemen apa pun dengan menelepon:

$(element).focusEnd();

Atau Anda menentukan posisi.

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

Ini bekerja untuk saya di Safari 5 di Mac OSX, jQuery 1.4:

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

Saya menyadari bahwa ini adalah posting yang sangat lama, tetapi saya berpikir bahwa saya mungkin harus menawarkan solusi yang lebih sederhana untuk memperbaruinya hanya menggunakan 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;
}

Penggunaan untuk menggunakan ctrl-enter untuk menambahkan baris baru (seperti di 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);
    }
});

Saya terbuka untuk kritik. Terima kasih.

PEMBARUAN: Solusi ini tidak memungkinkan fungsionalitas salin dan tempel normal berfungsi (yaitu ctrl-c, ctrl-v), jadi saya harus mengedit ini di masa mendatang untuk memastikan bagian itu berfungsi lagi. Jika Anda memiliki ide bagaimana melakukannya, silakan komentar di sini, dan saya akan dengan senang hati mengujinya. Terima kasih.

Di IE untuk memindahkan kursor pada beberapa posisi, kode ini cukup:

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

Saya menggunakan ini: http://plugins.jquery.com/project/jCaret

Tetapkan fokus sebelum Anda memasukkan teks ke dalam textarea demikian?

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

Ini bekerja untuk saya di chrome

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

Rupanya Anda memerlukan penundaan mikrodetik atau lebih, karena biasanya pengguna fokus pada bidang teks dengan mengklik pada beberapa posisi di bidang teks (atau dengan menekan tab) yang ingin Anda timpa, jadi Anda harus menunggu sampai posisi tersebut diatur oleh pengguna klik lalu ubah.

Ingatlah untuk mengembalikan false tepat setelah pemanggilan fungsi jika Anda menggunakan tombol panah karena Chrome membelah frack up sebaliknya.

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

Berdasarkan pertanyaan ini , jawabannya tidak akan bekerja dengan sempurna untuk ie dan opera ketika ada baris baru di textarea. The jawaban menjelaskan bagaimana untuk menyesuaikan selectionStart, selectionEnd sebelum menelepon setSelectionRange.

Saya telah mencoba AdjustOffset dari pertanyaan lain dengan solusi yang diajukan oleh @AVProgrammer dan berfungsi.

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

Modifikasi kecil pada kode yang saya temukan di bitbucket

Kode sekarang dapat memilih / menyorot dengan titik awal / akhir jika diberi 2 posisi. Diuji dan berfungsi dengan baik di FF / Chrome / IE9 / Opera.

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

Kode tercantum di bawah ini, hanya beberapa baris yang berubah:

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

Saya harus membuatnya berfungsi untuk elemen yang dapat diedit dan jQuery dan seseorang mungkin ingin itu siap digunakan:

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

Penggunaan $(selector).getCaret()mengembalikan offset angka dan $(selector).setCaret(num)menetapkan offset dan menetapkan fokus pada elemen.

Juga tip kecil, jika Anda menjalankan $(selector).setCaret(num)dari konsol itu akan mengembalikan konsol.log tetapi Anda tidak akan memvisualisasikan fokus karena didirikan di jendela konsol.

Bests; D

Anda dapat langsung mengubah prototipe jika setSelectionRange tidak ada.

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

tautan jsFiddle