suchen

Heim >Web-Frontend >js-Tutorial >Bei der Textfeld-Flashback-Eingabe bleibt der Fokus des Eingabefelds immer auf den Anfang_Javascript-Kenntnissen

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

WBOY
WBOYOriginal
2016-05-16 16:38:011756Durchsuche

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

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>

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

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Gründe und Lösungen für das Schließen der Seite window.location-Ereignis wird nicht ausgeführt_Javascript-KenntnisseNächster Artikel：Gründe und Lösungen für das Schließen der Seite window.location-Ereignis wird nicht ausgeführt_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen