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);
javascript
jquery
html
textfield
jcnnghm
sumber
sumber
$(this).get(0).setSelectionRange)
? Anda tahu itu persis samathis.setSelectionRange
, hanya lebih lambat dan lebih sulit untuk dibaca, bukan? jQuery benar-benar tidak melakukan apa pun untuk Anda di sini.Jawaban:
Saya memiliki dua fungsi:
Kemudian Anda dapat menggunakan setCaretToPos seperti ini:
Contoh langsung dengan a
textarea
dan ainput
, menunjukkan penggunaan dari jQuery:Tampilkan cuplikan kode
Pada 2016, diuji dan bekerja di Chrome, Firefox, IE11, bahkan IE8 (lihat yang terakhir di sini ; Cuplikan Stack tidak mendukung IE8).
sumber
textarea
(daninput
) untuk saya di Chrome, Firefox, IE8, dan IE11.Inilah solusi jQuery:
Dengan ini, Anda bisa melakukannya
sumber
selectRange($('.my_input')[0], 3, 5)
jika Anda sudah menggunakan jQuery. Lebih lanjut, itu harus bekerja dengan lebih dari satu elemen, jika Anda membutuhkannya, untuk alasan apa pun. Jika Anda ingin yang asli murni, silakan gunakan solusi CMS.$('#elem').focus()
terlebih dahulu untuk mendapatkan kursor berkedip muncul.Solusi di sini benar kecuali untuk kode ekstensi jQuery.
Fungsi ekstensi harus beralih pada setiap elemen yang dipilih dan kembali
this
ke rantai dukungan. Berikut iniyangmerupakan versi yang benar:sumber
return this.each(function...)
dan menghapus garis mandiri.Saya menemukan solusi yang berfungsi untuk saya:
Sekarang Anda dapat memindahkan fokus ke akhir elemen apa pun dengan menelepon:
Atau Anda menentukan posisi.
sumber
this.scrollTop(this[0].scrollHeight);
, untuk memastikan bahwa textarea digulir untuk membuat titik penyisipan terlihat.Ini bekerja untuk saya di Safari 5 di Mac OSX, jQuery 1.4:
sumber
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.
Penggunaan untuk menggunakan ctrl-enter untuk menambahkan baris baru (seperti di Facebook):
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.
sumber
Di IE untuk memindahkan kursor pada beberapa posisi, kode ini cukup:
sumber
Saya menggunakan ini: http://plugins.jquery.com/project/jCaret
sumber
Tetapkan fokus sebelum Anda memasukkan teks ke dalam textarea demikian?
sumber
Ini bekerja untuk saya di chrome
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.
sumber
Ingatlah untuk mengembalikan false tepat setelah pemanggilan fungsi jika Anda menggunakan tombol panah karena Chrome membelah frack up sebaliknya.
sumber
return false;
. Andaevent.preventDefault();
malah mau . Jika Anda mengembalikan false, Anda menyiratkanevent.stopPropagation()
yang tidak selalu diinginkanBerdasarkan 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.
sumber
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.
Kode tercantum di bawah ini, hanya beberapa baris yang berubah:
sumber
Saya harus membuatnya berfungsi untuk elemen yang dapat diedit dan jQuery dan seseorang mungkin ingin itu siap digunakan:
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
sumber
Anda dapat langsung mengubah prototipe jika setSelectionRange tidak ada.
tautan jsFiddle
sumber