Input kilas balik kotak teks mengekalkan fokus kotak input sentiasa pada kemahiran permulaan

Input kilas balik kotak teks mengekalkan fokus kotak input sentiasa pada kemahiran permulaan_javascript

WBOY

Lepaskan： 2016-05-16 16:38:01

asal

1741 orang telah melayarinya

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(); //将选择的内容同步到当前的对象
}
}

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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!