Bei der Textfeld-Flashback-Eingabe bleibt der Fokus des Eingabefelds immer auf den Anfang_Javascript-Kenntnissen-js-Tutorial-php.cn

Bei der Textfeld-Flashback-Eingabe bleibt der Fokus des Eingabefelds immer auf den Anfang_Javascript-Kenntnissen

WBOY

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

Original

1781 Leute haben es durchsucht

Die sogenannte Textfeld-Flashback-Eingabe bedeutet, dass der Fokus des Eingabefelds immer am Anfang liegt. Wie im Bild gezeigt, wird 987654321 im Eingabefeld angezeigt.

Warum möchten Sie diese Demo machen? Das liegt daran, dass ich im Projekt darauf gestoßen bin. Die Projektanforderungen sind zwei Eingabefelder, eines für die Vorwärtseingabe und das andere für die Rückwärtseingabe. Im Folgenden werde ich die Implementierungsideen und den Code aufschreiben.
Text-Flashback-Eingabe:

Solange wir sicherstellen, dass der Fokus des Eingabefelds immer an erster Stelle liegt, können wir erkennen, dass jedes Mal, wenn wir etwas eingeben, im Vordergrund steht, also im Rückblick

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

Nach dem Login kopieren

Solange wir den Parameter pos auf 0 setzen.

Das Folgende ist eine vollständige Demo, die normale Lösch- und Flashback-Eingaben implementiert.

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

Nach dem Login kopieren

Darüber hinaus sind die zugehörigen Funktionen zum Ermitteln der Fokusposition beigefügt, die Sie nutzen können

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

Nach dem Login kopieren

Zusammenfassung:

Nachdem wir den Texteingabefokus festgelegt und erhalten haben, können wir einige andere Spezialeffekte ausführen, z. B. das Löschen eines gesamten Wortes oder einer Variablen usw.

Wenn Sie gute Ideen für diesen Artikel haben, können Sie mir gerne helfen. Ich hoffe, dieser Artikel kann Ihnen helfen!