文本框倒叙输入让输入框的焦点始终在最开始的位置

前端技术 2023/09/07 JavaScript

所谓的文本框倒叙输入是指输入框的焦点始终在最开始的位置，如图所示，当我输入123456789时，在输入框上显示的是987654321。


为什么要做这个Demo？是因为在项目中遇到了，项目需求是两个输入框，一个正序输入，另一个倒叙输入。 下面我把实现的思路和代码写出来。
文本倒叙输入：

只要我们保证输入框的焦点始终在第一位，这样的话就可以实现每次我们输入的都在最前面，即倒叙

代码：

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

只要我们将参数pos设为0就可以了。

下面是一个完整的Demo，这个Demo实现了正常删除和倒叙输入。

<!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 style=\"\">
<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>

另外在附上相关的获取焦点位置的函数，可能你会用到

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

总结：

实现了设置和获取文本输入焦点，我们就可以做一些其他的特效，比如删除一整个单词或者变量等等。

如果你有关于此文的好想法，可以@me，希望此文能够帮助你！

本文地址：https://www.stayed.cn/item/18351

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案