hujung hadapan web
tutorial js
Input kilas balik kotak teks mengekalkan fokus kotak input sentiasa pada kemahiran permulaan_javascript
Input kilas balik kotak teks mengekalkan fokus kotak input sentiasa pada kemahiran permulaan_javascript
Input imbas balik kotak teks yang dipanggil bermakna fokus kotak input sentiasa berada di permulaan Seperti yang ditunjukkan dalam gambar, apabila saya memasukkan 123456789, 987654321 dipaparkan pada kotak input.
Mengapa anda mahu melakukan demo ini? Ini kerana saya menemuinya dalam projek Keperluan projek ialah dua kotak input, satu untuk input ke hadapan dan satu lagi untuk input ke belakang. Di bawah saya akan menulis idea dan kod pelaksanaan.
Input imbas balik teks:
Selagi kita memastikan fokus kotak input sentiasa berada di tempat pertama, barulah kita dapat sedar bahawa setiap kali kita input berada di hadapan, iaitu imbas kembali
Kod:
function setPosition(ctrl, pos) { //设置光标位置函数
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange(); //创建一个选择区域
range.collapse(true); //将光标移动到选择区域的开始位置
range.moveEnd('character', pos); //改变选择区域结束的位置
range.moveStart('character', pos); //改变选择区域开始的位置
range.select(); //将选择的内容同步到当前的对象
}
}Selagi kita menetapkan pos parameter kepada 0.
Berikut ialah Demo lengkap, yang melaksanakan pemadaman biasa dan input imbas balik.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
.content {
width: 300px;margin:0 auto;margin-top:50px;
}
ul {
list-style: none;
}
.elem {
width: 200px;
}
</style>
<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
</head>
<body>
<div >
<ul>
<li>
<input type="text" class="elem">
</li>
<li>
<input type="text" class="elem">
</li>
<li>
<input type="text" class="elem">
</li>
</ul>
</div>
<script>
function setPosition(ctrl, pos) { //设置光标位置函数
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange(); //创建一个选择区域
range.collapse(true); //将光标移动到选择区域的开始位置
range.moveEnd('character', pos); //改变选择区域结束的位置
range.moveStart('character', pos); //改变选择区域开始的位置
range.select(); //将选择的内容同步到当前的对象
}
}
$('.elem').on('keypress keyup', function() {
if(event.keyCode === 8)
return;
setPosition(this,0);
});
</script>
</body>
</html>Selain itu, fungsi berkaitan untuk mendapatkan kedudukan fokus dilampirkan, anda boleh menggunakannya
function getPosition(ctrl) {
// IE Support
var CaretPos = 0;
if (document.selection) {
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}Ringkasan:
Selepas menetapkan dan mendapatkan fokus input teks, kami boleh melakukan beberapa kesan khas lain, seperti memadamkan keseluruhan perkataan atau pembolehubah, dsb.
Jika anda mempunyai idea yang bagus untuk artikel ini, anda boleh @saya harap artikel ini dapat membantu anda!
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
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
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
1668
14
1428
52
1329
25
1273
29
1256
24
Bagaimana untuk mengalih keluar fokus dalam jquery
Feb 17, 2023 am 10:20 AM
Cara mengalih keluar fokus dalam jquery: 1. Dapatkan fokus melalui "document.getElementById('test').focus()"; 2. Gunakan kaedah "document.getElementById('test').blur();" tumpuan.
Program C/C++ untuk mencari puncak, fokus dan direktriks parabola
Sep 05, 2023 pm 05:21 PM
Aset titik-titik separas permukaanyang membentuk lengkung-lengkungan titik padalengkungan yang sama jaraknya dari titik di tengah(dipanggil fokus) adalah parabola.Persamaan am untuk parabolaisy=ax2+bx+cPucukofaparabolaadalah koordinatdaripada yang melakukan selekoh paling tajam di mana-mana
Gunakan jQuery untuk melaksanakan kotak input yang hanya membenarkan nombor dan titik perpuluhan untuk dimasukkan
Feb 26, 2024 am 11:21 AM
Laksanakan kotak input jQuery untuk mengehadkan input nombor dan titik perpuluhan Dalam pembangunan web, kita sering menghadapi keperluan untuk mengawal input kandungan oleh pengguna dalam kotak input, seperti mengehadkan input hanya nombor dan titik perpuluhan. Sekatan ini boleh dicapai melalui JavaScript dan jQuery. Berikut akan memperkenalkan cara menggunakan jQuery untuk melaksanakan fungsi mengehadkan input nombor dan titik perpuluhan dalam kotak input. 1. Struktur HTML Pertama, kita perlu membuat kotak input dalam HTML, kodnya adalah seperti berikut:
Bagaimana untuk melaksanakan kotak input berlabel menggunakan Vue?
Jun 25, 2023 am 11:54 AM
Dengan pembangunan aplikasi web, kotak input berlabel menjadi semakin popular. Kotak input jenis ini membolehkan pengguna memasukkan data dengan lebih mudah, dan juga memudahkan pengguna mengurus dan mencari data yang dimasukkan. Vue ialah rangka kerja JavaScript yang sangat berkuasa yang boleh membantu kami melaksanakan kotak input berlabel dengan cepat. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan kotak input berlabel. Langkah 1: Buat tika Vue Pertama, kita perlu mencipta tika Vue pada halaman Kodnya adalah seperti berikut: &l
Apakah kaedah pengoptimuman untuk had panjang kotak input dalam pembangunan Vue?
Jun 30, 2023 am 08:44 AM
Cara mengoptimumkan had panjang input kotak input dalam pembangunan Vue Pengenalan: Dalam proses pembangunan Vue, had panjang kotak input adalah keperluan biasa. Mengehadkan bilangan aksara yang dimasukkan pengguna dalam kotak input membantu mengekalkan ketepatan data, mengoptimumkan pengalaman pengguna dan meningkatkan prestasi sistem. Artikel ini akan memperkenalkan cara mengoptimumkan had panjang input kotak input dalam pembangunan Vue untuk memberikan pengalaman pengguna dan kecekapan pembangunan yang lebih baik. 1. Gunakan arahan model-v untuk mengikat nilai kotak input Dalam pembangunan Vue, kami biasanya menggunakan arahan model-v.
Gunakan fungsi PHP 'array_unshift' untuk memasukkan elemen pada permulaan tatasusunan
Jul 25, 2023 pm 03:39 PM
Sisipkan elemen pada permulaan tatasusunan menggunakan fungsi PHP "array_unshift" PHP ialah bahasa skrip bahagian pelayan yang digunakan secara meluas untuk mencipta halaman web dinamik. Dalam PHP, tatasusunan ialah struktur data yang sangat penting yang digunakan untuk menyimpan dan memanipulasi set data. Kadangkala kita perlu memasukkan elemen pada permulaan tatasusunan, kemudian kita boleh menggunakan fungsi terbina dalam PHP "array_unshift". Apakah yang dilakukan oleh fungsi "array_unshift".
Ajar anda langkah demi langkah cara menggunakan CSS untuk mencipta kotak input yang ringkas dan elegan
Jan 13, 2023 pm 03:55 PM
Artikel ini membawa anda pengetahuan yang berkaitan tentang CSS Ia terutamanya memperkenalkan cara menggunakan CSS untuk melaksanakan kotak input yang mudah dan canggih saya akan mengajar anda langkah demi langkah~ Mari kita lihat bersama-sama memerlukannya.
Laksanakan keperluan yang diperlukan untuk kotak input nama apabila halaman HTML melompat ke halaman PHP
Mar 10, 2024 am 10:21 AM
Apabila halaman HTML melompat ke halaman PHP, jika anda perlu menambah keperluan yang diperlukan pada kotak input nama, anda boleh melakukannya melalui elemen borang HTML dan JavaScript. Cara melaksanakan ciri ini akan diterangkan secara terperinci di bawah, dengan contoh kod khusus. Pertama, kami mencipta halaman HTML yang mengandungi borang dan kotak input nama. Tetapkan tanda "diperlukan" dalam kotak input nama dan anda boleh menggunakan JavaScript untuk melaksanakan pengesahan yang diperlukan bagi kotak input. Apabila pengguna mengklik butang hantar, jika nama akhir
