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
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
C/C++-Programm zum Ermitteln des Scheitelpunkts, des Fokus und der Leitlinie einer Parabel
Sep 05, 2023 pm 05:21 PM
Eine Menge von Punkten auf einer ebenen Oberfläche, die eine Kurve bilden, sodass jeder Punkt auf dieser Kurve gleich weit von einem Punkt in der Mitte (Fokus genannt) entfernt ist, ist eine Parabel. Die allgemeine Gleichung für die Parabel ist = ax2 + bx + c
So entfernen Sie den Fokus in JQuery
Feb 17, 2023 am 10:20 AM
So entfernen Sie den Fokus in jquery: 1. Rufen Sie den Fokus über „document.getElementById('test').focus()“ ab. 2. Verwenden Sie zum Entfernen die Methode „document.getElementById('test').blur();“ der Fokus.
Verwenden Sie jQuery, um ein Eingabefeld zu implementieren, das nur die Eingabe von Zahlen und Dezimalstellen zulässt
Feb 26, 2024 am 11:21 AM
Implementieren Sie ein jQuery-Eingabefeld, um die Eingabe von Zahlen und Dezimalstellen einzuschränken. Bei der Webentwicklung müssen wir häufig die Eingabe von Inhalten durch Benutzer in das Eingabefeld beschränken, indem wir beispielsweise die Eingabe nur von Zahlen und Dezimalstellen beschränken. Diese Einschränkung kann durch JavaScript und jQuery erreicht werden. Im Folgenden wird erläutert, wie Sie mit jQuery die Funktion zur Begrenzung der Eingabe von Zahlen und Dezimalstellen in das Eingabefeld implementieren. 1. HTML-Struktur Zuerst müssen wir ein Eingabefeld in HTML erstellen. Der Code lautet wie folgt:
Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS ein einfaches und elegantes Eingabefeld erstellen
Jan 13, 2023 pm 03:55 PM
Dieser Artikel vermittelt Ihnen relevantes Wissen über CSS. Ich werde Ihnen Schritt für Schritt beibringen, wie Sie CSS verwenden. Schauen wir uns das gemeinsam an Brauche Hilfe.
Was ist die Optimierungsmethode für die Längenbeschränkung von Eingabefeldern in der Vue-Entwicklung?
Jun 30, 2023 am 08:44 AM
So optimieren Sie die Eingabelängenbeschränkung des Eingabefelds in der Vue-Entwicklung Einführung: Im Vue-Entwicklungsprozess ist die Längenbeschränkung des Eingabefelds eine häufige Anforderung. Die Begrenzung der Anzahl der Zeichen, die Benutzer in das Eingabefeld eingeben, trägt dazu bei, die Datengenauigkeit aufrechtzuerhalten, das Benutzererlebnis zu optimieren und die Systemleistung zu verbessern. In diesem Artikel erfahren Sie, wie Sie die Eingabelängenbeschränkung des Eingabefelds in der Vue-Entwicklung optimieren, um eine bessere Benutzererfahrung und Entwicklungseffizienz zu erzielen. 1. Verwenden Sie die V-Model-Direktive, um den Eingabefeldwert zu binden. In der Vue-Entwicklung verwenden wir normalerweise die V-Model-Direktive.
Wie implementiert man ein beschriftetes Eingabefeld mit Vue?
Jun 25, 2023 am 11:54 AM
Mit der Entwicklung von Webanwendungen erfreuen sich beschriftete Eingabefelder immer größerer Beliebtheit. Diese Art von Eingabefeld ermöglicht Benutzern eine bequemere Eingabe von Daten und erleichtert Benutzern außerdem die Verwaltung und Suche der eingegebenen Daten. Vue ist ein sehr leistungsfähiges JavaScript-Framework, das uns dabei helfen kann, beschriftete Eingabefelder schnell zu implementieren. In diesem Artikel wird erläutert, wie Sie mit Vue ein beschriftetes Eingabefeld implementieren. Schritt 1: Erstellen Sie eine Vue-Instanz. Zuerst müssen wir eine Vue-Instanz auf der Seite erstellen. Der Code lautet wie folgt: &l
Implementieren Sie die erforderlichen Anforderungen für das Namenseingabefeld, wenn die HTML-Seite zur PHP-Seite springt
Mar 10, 2024 am 10:21 AM
Wenn Sie von der HTML-Seite zur PHP-Seite springen und erforderliche Anforderungen zum Namenseingabefeld hinzufügen müssen, können Sie dies über HTML-Formularelemente und JavaScript tun. Die Implementierung dieser Funktion wird im Folgenden anhand spezifischer Codebeispiele ausführlich beschrieben. Zuerst erstellen wir eine HTML-Seite, die ein Formular und ein Namenseingabefeld enthält. Setzen Sie im Namenseingabefeld eine „erforderlich“-Markierung, und Sie können JavaScript verwenden, um die erforderliche Überprüfung des Eingabefelds zu implementieren. Wenn der Benutzer auf die Schaltfläche „Senden“ klickt, wird der Nachname angezeigt
Verwenden Sie die PHP-Funktion „array_unshift', um Elemente am Anfang des Arrays einzufügen
Jul 25, 2023 pm 03:39 PM
Fügen Sie mit der PHP-Funktion „array_unshift“ ein Element am Anfang eines Arrays ein. PHP ist eine weit verbreitete serverseitige Skriptsprache zum Erstellen dynamischer Webseiten. In PHP ist ein Array eine sehr wichtige Datenstruktur, die zum Speichern und Bearbeiten eines Datensatzes verwendet wird. Manchmal müssen wir ein Element am Anfang des Arrays einfügen, dann können wir die in PHP integrierte Funktion „array_unshift“ verwenden. Was die Funktion „array_unshift“ bewirkt
