JQuery/HTML5 Input Fokus dan kedudukan kursor

Dokumen ini menyediakan coretan kod dan contoh yang menunjukkan cara menguruskan fokus dan kedudukan input kursor menggunakan jQuery dan HTML5. Maklum balas dan cadangan dialu -alukan.

fokus input jQuery

Gunakan fungsi

untuk menetapkan fokus kepada elemen input: focus()

// Set focus on input
$('input[name=firstName]').focus();

Lihat ini dalam tindakan di https://www.php.cn/link/3f74a886c7f841699690962c497d4f30

HTML5 Input Focus

HTML5 menawarkan keupayaan auto-fokus terbina dalam. Walaupun disokong secara meluas, perhatikan bahawa ia mungkin tidak berfungsi secara konsisten di semua pelayar (diuji bekerja di Chrome dan Firefox, tetapi tidak IE9 atau lebih tua).

<input type="text" autofocus>

Lihat contoh ini di https://www.php.cn/link/8bd045c0275185605e58d7fec40ecae6

kedudukan kursor set JQuery

Fungsi jQuery ini menetapkan kedudukan kursor ke indeks aksara tertentu dalam medan input:

// Set cursor position
$.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;
};

Penggunaan contoh:

menetapkan kedudukan kursor selepas watak pertama.

Lihat contoh ini di https://www.php.cn/link/5496f40877a2ded20411a2266e86f523

$('#username').setCursorPosition(1);

jQuery pilih julat teks

Fungsi jQuery ini secara automatik memilih pelbagai teks tertentu (beberapa aksara) dalam medan input:

Penggunaan Contoh:

// Select text range
$.fn.selectRange = function(start, end) {
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            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();
        }
    });
};

Pilih 5 aksara pertama.

Lihat contoh ini di https://www.php.cn/link/c7410e5d6aa6b2f78d9267b7908c2

$('#username').selectRange(0, 5);

Soalan Lazim (Soalan Lazim)

Bahagian ini menangani soalan umum mengenai fokus input jQuery/HTML5 dan kedudukan kursor. Jawapan memberikan contoh kod ringkas untuk kejelasan. (Nota: Seksyen FAQ asal mempunyai beberapa ketidakkonsistenan pemformatan dan blok kod yang tidak diformat dengan betul sebagai kod. Versi ini membetulkan isu -isu tersebut.)

Q: Bagaimana saya boleh menetapkan kedudukan kursor pada akhir medan input menggunakan jQuery?

Q: Bagaimana saya boleh menggunakan jQuery untuk memberi tumpuan pada medan input apabila pautan diklik?

var input = $('#inputField');
var len = input.val().length;
input.focus();
input[0].setSelectionRange(len, len);

Q: Apakah perbezaan antara peristiwa

$('#linkID').click(function() {
  $('#inputField').focus();
});

dan

dalam jQuery? focus focusin dicetuskan apabila elemen menerima fokus dan tidak gelembung.

adalah sama tetapi gelembung ke atas dom.

focus focusin Q: Bagaimana saya boleh mencetuskan peristiwa fokus secara manual dalam jQuery?

Q: Bagaimana saya dapat mengesan apabila medan input kehilangan fokus dalam jQuery?

$('#inputField').focus(); // or $('#inputField').trigger('focus');

// Set focus on input
$('input[name=firstName]').focus();

Q: Bagaimana saya boleh mencegah medan input daripada kehilangan fokus dalam jQuery?

menggunakan preventDefault dalam pengendali focusout biasanya tidak disyorkan kerana ia boleh membawa kepada tingkah laku yang tidak dijangka. Pertimbangkan pendekatan alternatif untuk mencapai hasil yang anda inginkan.

Q: Bagaimana saya boleh menetapkan fokus pada medan input seterusnya apabila kekunci Enter ditekan dalam jQuery?

<input type="text" autofocus>

Q: Bagaimana saya boleh menetapkan kedudukan kursor pada indeks tertentu dalam medan input menggunakan jQuery?

// Set cursor position
$.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;
};

Q: Bagaimana saya boleh mendapatkan kedudukan kursor semasa dalam medan input menggunakan jQuery?

$('#username').setCursorPosition(1);

Q: Bagaimana saya boleh memindahkan kursor ke permulaan medan input menggunakan jQuery?

// Select text range
$.fn.selectRange = function(start, end) {
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            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();
        }
    });
};

Atas ialah kandungan terperinci JQuery/HTML5 Input Fokus dan kedudukan kursor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!