Cet article a partagé les effets spéciaux de la page Web spéciale de la boîte de saisie de texte JS pour votre référence. Le contenu spécifique est le suivant
Exemple 1: Laissez la zone de texte ne fait que souligner
<script type = "text / javascript"> function changeTextStyle () {// Laissez la zone de texte uniquement des soulignements // obtient le dom var mytext de la zone de texte = document.getElementById ("myText"); mytext.style.borderColor = 'Black'; // Définit la couleur de la bordure mytext.style.borderstyle = 'solide'; // Définissez le style de bordure sur une ligne continue mytext.style.borderwidth = '0 0 1px 0'; // Définit la taille de la bordure, 0 signifie non} </cript>Exemple 2: Première lettre ou toutes les lettres capitalisent
<script type = "text / javascript"> // Fonction de vérification de format valideInput () {// Obtenez le dom de la zone de texte var mytext1 = document.getElementById ("myText1"); var myText2 = document.getElementById ("myText2"); var val1 = mytext1.value; // Valeur de la zone de texte 1 var Val2 = MyText2.Value; // Valeur de la zone de texte 2 var errmsg = ''; // Définir le caractère d'invite d'erreur // Défendez s'il démarre avec des lettres de majuscules if (val1! = '' && (val1.charat (0)> 'z' || Val1.charat (0) <'a')) {// Split Error Caracter Errmsg = 'La première lettre de texte Box 1 doit être capitalisée / n'; alert (errmsg); } if (Val2! = '' &&! // b [az] + / b / .test (val2)) {// Caractère d'erreur divisé Errmsg = 'La première lettre de texte 2 doit être capitalisée / n'; alert (errmsg); }} </ script>Exemple 3: cases de texte qui ne peuvent entrer que des nombres
<script type = "text / javascript"> // Fonction de vérification de format valideInput () {// Obtenez le dom de la zone de texte var mytext = document.getElementById ("myText"); var val = myText.Value; // obtient la valeur saisie par l'utilisateur if (! // b [0-9] + / b / .test (val)) {// Utiliser une alerte de vérification régulière ('seulement entre les nombres'); // Message d'erreur de pointe}} </ script>Exemple 4: Vérifiez le format de messagerie avec des expressions régulières
<script type = "text / javascript"> // Fonction de vérification de format valideInput () {// Obtenez le dom de la zone de texte var mytext = document.getElementById ("myText"); var email = myText.Value; // Obtenez la contribution de l'e-mail par l'utilisateur // Définissez l'expression régulière var e-mail = /^(@a-za-z0-9_- :+@ ((_A-ZA-Z0-9_- :++(/. if (emailg.test (e-mail)) {// juger s'il répond à l'alerte des exigences du format ("la certification est adoptée, la soumission est autorisée"); // pass} else {alert ("chèque échoué, veuillez vérifier pour rentrer"); // Vérification a échoué}}} </ script>Exemple 5: effacez le contenu de la zone de texte lorsqu'il devient Focus
<script type = "text / javascript"> // clear contenu function clearContent (myText) {myText.value = ''; // Définissez la valeur du contenu du texte sur un caractère null} </cript> <input type = "text" value = "" onfocus = "clearContent (this)" />Exemple 6: Une fois que l'utilisateur est entré dans le format, vérifiez immédiatement
<script type = "text / javascript"> fonction validatetel () {// Format Verification // Obtenez le dom de la zone de texte var mytel = document.getElementById ("mytel"); var val = mytel.value; // obtient la valeur saisie par l'utilisateur if (! // b [0-9] + / b / .test (val)) {// Utiliser une alerte de vérification régulière ('seulement entre les nombres'); // Message d'erreur invite // Modifier le style, attirer l'attention mytel.style.border = '1px solide rouge'; } else if (val.length! = 11) {// la longueur doit être alerte 11 bits ('le numéro de téléphone mobile est 11 bits'); // Réponse le message d'erreur // Modifiez le style pour attirer l'attention MyTel.Style.Borter = '1Px Solid Red'; } else {// Modifiez le style pour indiquer que mytel.style.border = '1px Solid Green'; Retour Vrai; }} </ script> <input type = "text" value = "" id = "mytel" onblur = "validatetel ()" />Exemple 7: La bordure de la zone de texte clignote lors de la saisie du texte
Il est préférable d'écrire OnFocus () et OnBlur () par paires!
<script type = "text / javascript"> // initialize fonction function init () {// obtenir tous les textes text var textes = document.getElementsByTagName ('input'); // Transférer toutes les boîtes de texte pour (var i = 0; i <text.length; i ++) {var t = textes [i]; // Timer de la boîte de texte actuelle var; // Événement de mise au point du superviseur t.Onfocus = function () {var e = this; // conserve la référence du DOM actuel // la minuterie qui commence à flash = setInterval (function () {// obtient la variable de couleur de bordure actuelle var c = e.style.borderColor; if (c == 'jaune') {// If If If If Is Yellow E.Style. couleur} else {// sinon, la bordure tourne jaune e.style.borderColor = 'jaune';}}, 1000); // clignote toutes les 1 secondes}; t.onblur = function () {// parle pour les événements de congé // restaure la couleur de la bordure t.style.borderColor = ''; ClearInterval (Timer); // Clear Timer}}}} </cript> <Body Style = "Text-Adign: Centre;" onload = "init ();">Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.