Maison >interface Web >js tutoriel >La saisie flashback de la zone de texte maintient le focus de la zone de saisie toujours au début_compétences javascript

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBoriginal: 2016-05-16 16:38:011954parcourir

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

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>

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

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 !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Raisons et solutions pour fermer la fenêtre de la page. L'événement de localisation n'est pas exécuté_compétences JavascriptArticle suivant：Raisons et solutions pour fermer la fenêtre de la page. L'événement de localisation n'est pas exécuté_compétences Javascript

Articles Liés

Voir plus