Home > Article > Web Front-end > Text box flashback input keeps the focus of the input box always at the beginning_javascript skills

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

WBOYOriginal: 2016-05-16 16:38:011745browse

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

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>

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Reasons and solutions for closing page window.location event not executing_javascript skillsNext article：Reasons and solutions for closing page window.location event not executing_javascript skills

See more

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

Related articles