Dieser Artikel hat die Spezialeffekte der speziellen JS -Texteingabefeld für Ihre Referenz geteilt. Der spezifische Inhalt ist wie folgt
Beispiel 1: Lassen Sie das Textfeld nur unterstreicht
<script type = "text/javaScript"> Funktion ChangeTextStyle () {// Lassen Sie das Textfeld nur unterdrückt // das DOM var myText = document.getElementById des Textfelds ("myText"); mytext.style.borderColor = 'schwarz'; // Setzen Sie die Grenzefarbe mytext.style.borderSyle = 'Solid'; // Setzen Sie den Randstil auf eine durchgezogene Linie mytext.style.borderWidth = '0 0 1px 0'; // Setzen Sie die Randgröße, 0 nein} </script>Beispiel 2: Erster Buchstaben oder alle Briefe Kapitalisieren
<script type = "text/javaScript"> // Formatverifizierungsfunktion validateInput () {// das DOM des Textfelds Var myText1 = document.getElementById ("myText1"); var myText2 = document.getElementById ("MyText2"); var val1 = MyText1.Value; // Wert des Textfelds 1 var val2 = myText2.Value; // Wert des Textfelds 2 var errmsg = ''; // Fehleraufforderung definieren // Verteidigen Sie, ob es mit Großbuchstaben beginnt, wenn (val1! Alert (Errmsg); } if (val2! Alert (Errmsg); }} </script>Beispiel 3: Textfelder, die nur Zahlen eingeben können
<script type = "text/javaScript"> // Formatverifizierungsfunktion validateInput () {// das DOM des Textfelds Var myText = document.getElementById ("MyText"); var val = mytext.value; // Erhalten Sie den vom Benutzer eingegebenen Wert if (! // b [0-9]+/b/.Test (val)) {// Verwenden Sie reguläre Überprüfungswarnungen ('nur Zahlen eingeben'); // Fehlermeldung Tipp}} </script>Beispiel 4: Überprüfen Sie das E -Mail -Format mit regulären Ausdrücken
<script type = "text/javaScript"> // Formatverifizierungsfunktion validateInput () {// das DOM des Textfelds Var myText = document.getElementById ("MyText"); var E -Mail = myText.Value; // Erhalten Sie die E-Mail-Eingabe durch Benutzer // Definieren Sie den regulären Ausdruck var E-MailREG = /^ance (awa-z0-9_- weibliche). if (E -MailReg.test (E -Mail)) {// beurteilen, ob es den Formatanforderungen ist ("Zertifizierung ist verabschiedet, Einreichung ist zulässig"); // Pass} else {alert ("Scheck fehlgeschlagen, bitte prüfen Sie, um erneut einzusteigen"); // Überprüfung fehlgeschlagen}}} </script>Beispiel 5: Löschen Sie den Inhalt des Textfelds, wenn es sich konzentriert
<script type = "text/javaScript"> // Inhaltsfunktion ClearContent (MyText) {mytext.value = ''; // Setzen Sie den Wert des Textinhalts auf ein Nullzeichen} </script> <Eingabe type = "text" value = "" onfocus = "clearContent (this)"/>Beispiel 6: Nachdem der Benutzer die Formatprüfung sofort eingegeben hat
<script type = "text/javaScript"> Funktion validETETEL () {// Formatverifizierung // DOM des Textfelds Var myTel = document.getElementById ("myTel"); var val = mytel.value; // Erhalten Sie den vom Benutzer eingegebenen Wert if (! // b [0-9]+/b/.Test (val)) {// Verwenden Sie reguläre Überprüfungswarnungen ('nur Zahlen eingeben'); // Eingabeaufforderung Fehlermeldung // Stil ändern, Aufmerksamkeit mytel.style.border = '1px Solid Red'; } else if (val.length! = 11) {// Länge muss 11-Bit-Alarm sein ('Mobiltelefonnummer ist 11-Bit'); // Beantworten Sie die Fehlermeldung // Ändern Sie den Stil, um die Aufmerksamkeit mytel.style.border = '1px Solid Red' zu erregen; } else {// modifizieren Sie den Stil, um anzuzeigen, dass myTel.style.border = '1px fest Grün'; zurückkehren; }} </script> <input type = "text" value = "" id = "myTel" onblur = "validatetel ()"/>Beispiel 7: Das Textfeld Rand blinkt beim Eingeben von Text
Es ist am besten, Onfocus () und Onblur () zu paarweise zu schreiben!
<script type = "text/javaScript"> // Funktionsfunktion initialisieren init () {// ALLE text DOM var text = document.getElementsByTagName ('input'); // alle Textfelder für (var i = 0; i <textes.length; i ++) {var t = texte [i]; // aktuelles Textfeld var Timer; // Supervisor Focus Ereignis t.onfocus = function () {var e = this; // behalten Sie die Referenz des aktuellen DOM // des Timers auf, der zu flash = setInterval (function () {// die aktuelle Grenzfarbe Variable Var C = E.Style.borderColor; if (c == 'gelegen') {// // if it is Yellow E.Stystyle. Farbe} else {// Ansonsten wird der Rand gelb E.Style.BorderColor = 'Yellow'; t.onblur = function () {// spricht für Urlaubsereignisse // restauriert die Grenze Farbe t.style.borderColor = ''; ClearInterval (Timer); // Timer löschen}}}} </script> <body style = "text-align: center;" onload = "init ();">Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.