La saisie flashback de la zone de texte maintient le focus de la zone de saisie toujours au début_compétences javascript-js tutoriel-php.cn

La saisie flashback de la zone de texte maintient le focus de la zone de saisie toujours au début_compétences javascript

WBOY

Libérer： 2016-05-16 16:38:01

original

1749 Les gens l'ont consulté

La saisie dite flashback de la zone de texte signifie que le focus de la zone de saisie est toujours au début. Comme le montre l'image, lorsque je saisis 123456789, 987654321 est affiché dans la zone de saisie.

Pourquoi veux-tu faire cette démo ? C'est parce que je l'ai rencontré dans le projet. Les exigences du projet sont deux zones de saisie, une pour la saisie avant et l'autre pour la saisie arrière. Ci-dessous, j'écrirai les idées d'implémentation et le code.
Saisie de flashback de texte :

Tant que nous veillons à ce que le focus de la zone de saisie soit toujours à la première place, nous pouvons alors réaliser que chaque fois que nous saisissons, c'est au premier plan, c'est-à-dire un 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(); //将选择的内容同步到当前的对象
}
}

Copier après la connexion

Tant qu'on règle le paramètre pos à 0.

Ce qui suit est une démo complète, qui implémente la suppression normale et la saisie flashback.

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

Copier après la connexion

De plus, les fonctions associées à l'obtention de la position de mise au point sont jointes, vous pouvez les utiliser

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

Copier après la connexion

Résumé :

Après avoir défini et obtenu le focus de saisie de texte, nous pouvons créer d'autres effets spéciaux, tels que la suppression d'un mot ou d'une variable entière, etc.

Si vous avez de bonnes idées pour cet article, vous pouvez me contacter. J'espère que cet article pourra vous aider !