Este artículo ha compartido los efectos especiales de la página web especial de entrada de texto JS para su referencia. El contenido específico es el siguiente
Ejemplo 1: Deje que el cuadro de texto solo tenga subrayados
<script type = "text/javaScript"> function ChangEteTextStyle () {// Sea que el cuadro de texto solo tiene subsensores // obtener el cuadro de texto DOM var mytext = document.getElementById ("mytext"); mytext.style.borderColor = 'Black'; // establece el color de borde mytext.style.borderstyle = 'sólido'; // Establezca el estilo de borde en una línea sólida mytext.style.borderWidth = '0 0 1px 0'; // Establecer el tamaño del borde, 0 significa no} </script>Ejemplo 2: Primera letra o todas las letras capitalizar
<script type = "text/javaScript"> // Función de verificación de formato ValidateInput () {// Obtener el DOM del cuadro de texto var myText1 = document.getElementById ("myText1"); var myText2 = document.getElementById ("myText2"); var val1 = myText1.Value; // Valor del cuadro de texto 1 var val2 = myText2.Value; // Valor del cuadro de texto 2 var errsg = ''; // Definir el carácter de intento de error // defender si comienza con letras mayúsculas if (val1! = '' && (val1.charat (0)> 'z' || val1.charat (0) <'a')) {// Split Error carácter errmsg = 'La primera letra del cuadro de texto 1 debe ser capitalizado/n'; alerta (errmsg); } if (val2! = '' &&! // b [AZ]+/B/.TEST (val2)) {// Split Error carácter errmsg = 'La primera letra del cuadro de texto 2 debe ser capitalizado/n'; alerta (errmsg); }} </script>Ejemplo 3: cuadros de texto que solo pueden ingresar números
<script type = "text/javaScript"> // Función de verificación de formato ValidateInput () {// Obtener el DOM del cuadro de texto var mytext = document.getElementById ("mytext"); var val = myText.Value; // Obtenga el valor ingresado por el usuario if (! // b [0-9]+/b/.test (val)) {// use alerta de verificación regular ('solo ingrese números'); // Mensaje de error de consejo}} </script>Ejemplo 4: Verifique el formato de correo electrónico con expresiones regulares
<script type = "text/javaScript"> // Función de verificación de formato ValidateInput () {// Obtener el DOM del cuadro de texto var mytext = document.getElementById ("mytext"); var correaje = myText.Value; // Obtenga la entrada de correo electrónico por el usuario // Defina la expresión regular var Correo electrónico el correo electrónico = /^(bar-Za-Z0-9_-font>)+@(ba-Za-z0-9_-font>)+((/.ima-Za-z0-9_-font> =2,3')/1,2})/; if (correo electrónicoG.Test (correo electrónico)) {// juzga si cumple con la alerta de requisitos de formato ("se aprueba la certificación, se permite el envío"); // pase} else {alert ("verificar fallado, verificar para volver a ingresar"); // verificación fallida}}} </script>Ejemplo 5: Borre el contenido del cuadro de texto cuando se convierta en enfoque
<script type = "text/javaScript"> // borrar la función de contenido ClearContent (myText) {myText.value = ''; // Establezca el valor del contenido de texto en un carácter nulo} </script> <input type = "text" value = "" onfocus = "clearContent (this)"/>Ejemplo 6: después de que el usuario ingrese la verificación de formato inmediatamente
<script type = "text/javaScript"> función validateTel () {// verificación de formato // Obtener el DOM del cuadro de texto var mytel = document.getElementById ("mytel"); var val = mytel.value; // Obtenga el valor ingresado por el usuario if (! // b [0-9]+/b/.test (val)) {// use alerta de verificación regular ('solo ingrese números'); // Mensaje de error de inmediato // Modificar el estilo, atraer atención mytel.style.border = '1px sólido rojo'; } else if (val.length! = 11) {// La longitud debe ser alerta de 11 bits ('el número de teléfono móvil es de 11 bits'); // Responda el mensaje de error // Modificar el estilo para atraer la atención mytel.style.border = '1px sólido rojo'; } else {// Modifique el estilo para indicar que mytel.style.border = '1px Solid Green'; devolver verdadero; }} </script> <input type = "text" value = "" id = "mytel" onblur = "validateLetel ()"/>Ejemplo 7: El borde del cuadro de texto parpadea al ingresar texto
¡Es mejor escribir onfocus () y onblur () en pares!
<script type = "text/javaScript"> // Inicializar función de la función init () {// Obtener todo el texto DOM var texts = document.getElementsByTagName ('input'); // Transferir todos los cuadros de texto para (var i = 0; i <texts.length; i ++) {var t = texts [i]; // Temperador VAR de cuadro de texto actual; // Evento de enfoque de supervisor t.onfocus = function () {var e = this; // Conserva la referencia del DOM actual // el temporizador que comienza a flash = setInterval (function () {// Obtener la variable de color de borde actual variable var c = e.style.borderdercolor; if (c == 'amarillo') {// si es amarillo e.style.bordercolorcolor = ''; color} else {// de lo contrario, el borde se vuelve amarillo e.style.borderColor = 'Yellow'; t.onblur = function () {// habla para dejar eventos // restaura el color del borde t.style.borderColor = ''; ClearInterval (temporizador); // Clear Timer}}}} </script> <body style = "text-align: center;" onload = "init ();">Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.