hujung hadapan web
tutorial js
Kaedah JS untuk memasukkan kandungan pada kedudukan kursor dalam kemahiran div_javascript boleh diedit
Kaedah JS untuk memasukkan kandungan pada kedudukan kursor dalam kemahiran div_javascript boleh diedit
Contoh dalam artikel ini menerangkan kaedah js untuk memasukkan kandungan pada kedudukan tertentu dalam div boleh edit, sama seperti editor yang kami gunakan dan dikongsi dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:
Mula-mula dayakan DIV untuk mengedit mod
Hidupkan mod edit div dengan menetapkan contenteditable=true Dengan cara ini, DIV boleh memasukkan kandungan seperti kotak teks.
Tidak bercakap tentang topik itu lagi. Begini cara mendapatkan atau menetapkan kedudukan kursor.
2 langkah:
① Dapatkan kedudukan kursor dalam DIV
② Tukar kedudukan kursor
document.onselectionchange = fungsi () {
julat var = document.selection.createRange();
var srcele = range.parentElement(); //Dapatkan elemen semasa
var copy = document.body.createTextRange();
copy.moveToElementText(srcele);
untuk (kursor = 0; copy.compareEndPoints("StartToStart", julat) < 0; kursor ) {
copy.moveStart("character", 1); //Tukar kedudukan kursor.
}
}
Ikat peristiwa penukaran kursor pada dokumen. Digunakan untuk merekodkan kedudukan kursor.
Dengan cara ini, anda boleh mendapatkan kedudukan kursor DIV.
lyTXT1.focus();
var r = document.selection.createRange();
//Oleh kerana pergerakan di sini bermula dari kursor semasa (nampaknya kotak teks bermula dari 0.), jadi kita perlu mendapatkan kedudukan kursor semasa, dan kemudian kita boleh mengira berapa banyak kedudukan untuk bergerak, supaya kita boleh bergerak kursor ke Lokasi yang anda mahu
r.moveStart('character', lyTXT1.innerText.length - cursor);
r.collapse(true);
r.select();
}
Melalui perkara di atas kita boleh menggerakkan kursor dalam DIV ke penghujung
Contoh lengkap
function insertHtmlAtCaret(html) {
var sel, julat;
jika (window.getSelection) {
// IE9 dan bukan IE
sel = window.getSelection();
jika (sel.getRangeAt && sel.rangeCount) {
julat = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() akan berguna di sini tetapi
// bukan standard dan tidak disokong dalam semua penyemak imbas (IE9, untuk satu)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), nod, lastNode;
manakala ( (nod = el.firstChild) ) {
lastNode = frag.appendChild(nod);
}
range.insertNode(frag);
// Kekalkan pilihan
jika (Nod terakhir) {
julat = julat.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(julat);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}
Lihat contoh lain berdasarkan jquery
*{
margin:0; padding:0;
}
.kawasan-mesej-im{
lebar:98%;
padding:2px;
ketinggian:75px;
sempadan:#000 pepejal 1px;
latar belakang:#fff;
fon:12px/20px arial,"5b8b4f53";
word-wrap:break-word;
limpahan-y:auto;
ketinggian garis:1;
}
.ul{display:none;}
.ul li{
warna latar belakang:#CCC;
lebar:50px;
}
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1375
52
Menggunakan operator MINUS dalam SQL
Feb 18, 2024 pm 04:53 PM
Penggunaan MINUS dalam SQL dan contoh kod khusus Dalam SQL, MINUS ialah operator yang digunakan untuk melakukan operasi perbezaan antara dua set hasil. Ia digunakan untuk memadam baris yang sama daripada set hasil pertama seperti dalam set hasil kedua. Set hasil yang dikembalikan oleh operator MINUS akan mengandungi baris yang wujud hanya dalam set hasil pertama. Berikut menggunakan contoh kod khusus untuk menunjukkan penggunaan MINUS: Andaikan terdapat dua jadual - "jadual1" dan "jadual2", strukturnya adalah seperti berikut: Nama jadual: medan jadual1
Bagaimana untuk menukar pelayar Microsoft Edge untuk dibuka dengan navigasi 360 - Bagaimana untuk menukar pembukaan dengan navigasi 360
Mar 04, 2024 pm 01:50 PM
Bagaimana untuk menukar halaman yang membuka pelayar Microsoft Edge kepada navigasi 360 Ia sebenarnya sangat mudah, jadi sekarang saya akan berkongsi dengan anda kaedah menukar halaman yang membuka pelayar Microsoft Edge kepada 360 navigasi Rakan-rakan yang memerlukan lihat. Saya harap dapat membantu semua orang. Buka penyemak imbas Microsoft Edge. Kami melihat halaman seperti di bawah. Klik pada ikon tiga titik di sudut kanan atas. Klik "Tetapan." Klik "Pada permulaan" dalam lajur kiri halaman tetapan. Klik pada tiga titik yang ditunjukkan dalam gambar di lajur kanan (jangan klik "Buka Tab Baharu"), kemudian klik Edit dan tukar URL kepada "0" (atau nombor lain yang tidak bermakna). Kemudian klik "Simpan". Seterusnya, pilih "
Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS
Dec 17, 2023 pm 06:55 PM
Alat penting untuk analisis saham: Pelajari langkah-langkah untuk melukis carta lilin dalam PHP dan JS, contoh kod khusus diperlukan Dengan perkembangan pesat Internet dan teknologi, perdagangan saham telah menjadi salah satu cara penting bagi banyak pelabur. Analisis saham adalah bahagian penting dalam membuat keputusan pelabur, dan carta lilin digunakan secara meluas dalam analisis teknikal. Mempelajari cara melukis carta lilin menggunakan PHP dan JS akan memberikan pelabur maklumat yang lebih intuitif untuk membantu mereka membuat keputusan yang lebih baik. Carta candlestick ialah carta teknikal yang memaparkan harga saham dalam bentuk candlestick. Ia menunjukkan harga saham
Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik
Apr 03, 2024 am 11:55 AM
Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web
Cara membuat carta candlestick saham menggunakan PHP dan JS
Dec 17, 2023 am 08:08 AM
Cara menggunakan PHP dan JS untuk mencipta carta lilin saham Carta lilin saham ialah grafik analisis teknikal biasa dalam pasaran saham Ia membantu pelabur memahami saham dengan lebih intuitif dengan melukis data seperti harga pembukaan, harga penutup, harga tertinggi. dan harga terendah turun naik harga saham. Artikel ini akan mengajar anda cara membuat carta lilin saham menggunakan PHP dan JS, dengan contoh kod khusus. 1. Persediaan Sebelum memulakan, kita perlu menyediakan persekitaran berikut: 1. Pelayan yang menjalankan PHP 2. Pelayar yang menyokong HTML5 dan Kanvas 3
Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok
Dec 18, 2023 pm 03:39 PM
Dengan perkembangan pesat kewangan Internet, pelaburan saham telah menjadi pilihan semakin ramai orang. Dalam perdagangan saham, carta lilin adalah kaedah analisis teknikal yang biasa digunakan Ia boleh menunjukkan trend perubahan harga saham dan membantu pelabur membuat keputusan yang lebih tepat. Artikel ini akan memperkenalkan kemahiran pembangunan PHP dan JS, membawa pembaca memahami cara melukis carta lilin saham dan menyediakan contoh kod khusus. 1. Memahami Carta Lilin Saham Sebelum memperkenalkan cara melukis carta lilin saham, kita perlu memahami dahulu apa itu carta lilin. Carta candlestick telah dibangunkan oleh orang Jepun
Bagaimana untuk menyediakan Cheat Engine dalam bahasa Cina? Kaedah Cina tetapan Cheat Engine
Mar 13, 2024 pm 04:49 PM
CheatEngine ialah editor permainan yang boleh mengedit dan mengubah suai memori permainan. Walau bagaimanapun, bahasa lalainya adalah bukan bahasa Cina, yang menyusahkan ramai rakan Jadi bagaimana untuk menetapkan bahasa Cina dalam CheatEngine? Hari ini, editor akan memberi anda pengenalan terperinci tentang cara menyediakan bahasa Cina dalam CheatEngine saya harap ia dapat membantu anda. Kaedah tetapan satu: 1. Klik dua kali untuk membuka perisian dan klik "edit" di sudut kiri atas. 2. Kemudian klik "tetapan" dalam senarai pilihan di bawah. 3. Dalam tetingkap yang terbuka, klik "bahasa" dalam lajur kiri
Di mana untuk menetapkan butang muat turun dalam Microsoft Edge - Bagaimana untuk menetapkan butang muat turun dalam Microsoft Edge
Mar 06, 2024 am 11:49 AM
Adakah anda tahu di mana Microsoft Edge ditetapkan untuk memaparkan butang muat turun di bawah, editor akan membawakan anda kaedah menetapkan butang muat turun untuk dipaparkan dalam Microsoft Edge Saya harap ia akan membantu anda tentangnya! Langkah 1: Mula-mula buka Pelayar Microsoft Edge, klik logo [...] di sudut kanan atas, seperti yang ditunjukkan dalam rajah di bawah. Langkah 2: Kemudian klik [Settings] dalam menu pop timbul, seperti yang ditunjukkan dalam rajah di bawah. Langkah 3: Kemudian klik [Penampilan] di sebelah kiri antara muka, seperti yang ditunjukkan dalam rajah di bawah. Langkah 4: Akhir sekali, klik butang di sebelah kanan [Tunjukkan Butang Muat Turun] dan ia akan bertukar daripada kelabu kepada biru, seperti yang ditunjukkan dalam rajah di bawah. Di atas ialah tempat editor membawa anda cara menyediakan butang muat turun dalam Microsoft Edge.
