Bagaimana untuk Meletakkan Karet pada Penghujung Teks dalam Elemen Boleh Diedit Merentasi Pelayar?

Menetapkan Kedudukan Karet pada Pelayar Silang Akhir Teks

Pengenalan

Memasukkan baris baharu dan menetapkan kedudukan karet pada penghujung teks boleh berbeza-beza merentas penyemak imbas . Artikel ini meneroka penyelesaian silang penyemak imbas untuk menetapkan karet pada hujung teks apabila butang diklik.

Masalah

Dalam pelbagai penyemak imbas seperti Chrome, Firefox dan IE, cara teks disimpan dan dipaparkan dalam elemen boleh diedit kandungan berbeza. Ini boleh mengakibatkan pemisah baris atau pemformatan yang tidak diingini.

Selain itu, menetapkan kedudukan karet pada penghujung teks selepas butang klik memerlukan pendekatan yang konsisten merentas penyemak imbas.

Penyelesaian

Fungsi JavaScript berikut menyediakan penyelesaian silang penyemak imbas untuk meletakkan karet di hujung teks:

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

Fungsi ini merujuk kepada elemen boleh diedit kandungan (el) sebagai input. Ia menyemak kaedah getSelection dan createRange yang terdapat dalam pelayar moden. Jika tersedia, ia mencipta julat, memilih keseluruhan kandungan elemen, meruntuhkan julat hingga akhir dan menetapkan pemilihan.

Untuk penyemak imbas lama yang kekurangan kaedah ini, fungsi menggunakan kaedah createTextRange untuk mencapai kesan yang sama.

Untuk menggunakan fungsi ini, ia harus dipanggil apabila butang diklik, seperti ini:

$(document).ready(function() {
  $('#insert_caret').click(function() {
    var ele = $('#content');
    placeCaretAtEnd(ele);
  });
});

Atas ialah kandungan terperinci Bagaimana untuk Meletakkan Karet pada Penghujung Teks dalam Elemen Boleh Diedit Merentasi Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!