Text box flashback input keeps the focus of the input box always at the beginning

Text box flashback input keeps the focus of the input box always at the beginning_javascript skills

WBOY

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

Original

1754 people have browsed it

The so-called text box flashback input means that the focus of the input box is always at the beginning. As shown in the picture, when I input 123456789, 987654321 is displayed on the input box.

Why do you want to do this demo? It's because I encountered it in the project. The project requirements are two input boxes, one for forward input and the other for backward input. Below I will write out the implementation ideas and code.
Text flashback input:

As long as we ensure that the focus of the input box is always at the first place, then we can realize that every time we input is at the front, that is, flashback

Code:

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

Copy after login

As long as we set the parameter pos to 0.

The following is a complete Demo, which implements normal deletion and flashback input.

<!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>

Copy after login

In addition, the related functions for obtaining the focus position are attached, you may use them

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

Copy after login

Summary:

After setting and getting the text input focus, we can do some other special effects, such as deleting an entire word or variable, etc.

If you have any good ideas for this article, you can @me. I hope this article can help you!