Este artigo compartilhou os efeitos especiais da página da caixa de entrada de texto JS especial para sua referência. O conteúdo específico é o seguinte
Exemplo 1: Deixe a caixa de texto ter sublinha apenas
<script type = "text/javascript"> function changeTextStyle () {// Deixe a caixa de texto ter sublinhado // obtenha o dom da caixa de texto var myText = document.getElementById ("myText"); myText.style.bordercolor = 'preto'; // defina a cor da borda mytext.style.borderstyle = 'sólido'; // Defina o estilo de borda como uma linha sólida myText.style.borderwidth = '0 0 1px 0'; // Defina o tamanho da borda, 0 significa não} </cript>Exemplo 2: Primeira letra ou todas as cartas capitalizam
<script type = "text/javascript"> // Função de verificação de formato validateInput () {// obtenha o dom da caixa de texto var mytext1 = document.getElementById ("myText1"); var myText2 = document.getElementById ("myText2"); var val1 = mytext1.value; // valor da caixa de texto 1 var val2 = mytext2.Value; // Valor da caixa de texto 2 var errmsg = ''; // Defina o prompt de erro caractere // Defenda se ele começa com letras maiúsculas se (val1! = '' && (val1.charat (0)> 'z' || val1.charat (0) <'a')) {// Split Errle Character errmsg = 'A primeira letra de texto caixa 1 precisa ser capitalizada/n'; alerta (errmsg); } if (val2! = '' &&! // b [az]+/b/.test (val2)) {// Split Error do caractere errmsg = 'A primeira letra da caixa de texto 2 precisa ser capitalizada/n'; alerta (errmsg); }} </script>Exemplo 3: caixas de texto que só podem inserir números
<script type = "text/javascript"> // Função de verificação de formato validateInput () {// obtenha o dom da caixa de texto var mytext = document.getElementById ("myText"); var val = mytext.value; // Obtenha o valor inserido pelo usuário if (! // b [0-9]+/b/.test (val)) {// use alerta de verificação regular ('digite apenas números'); // Mensagem de erro da dica}} </sCript>Exemplo 4: Verifique o formato de email com expressões regulares
<script type = "text/javascript"> // Função de verificação de formato validateInput () {// obtenha o dom da caixa de texto var mytext = document.getElementById ("myText"); VAR email = myText.value; // Obtenha a entrada de e-mail do usuário // Defina a expressão regular var e-mailreg = /^(par-za-z0-9_--- ])+@(par-za-z0-9_--- )+(/.+-za-z0-9_-- {2,3 {1,2 aca)) if (emailreg.test (email)) {// julgar se atende ao alerta de requisitos de formato ("A certificação é aprovada, o envio é permitido"); // pass} else {alert ("Verifique falhou, verifique se entra"); // falha na verificação}}} </sCript>Exemplo 5: limpe o conteúdo da caixa de texto quando se tornar foco
<script type = "text/javascript"> // função de conteúdo limpo ClearContent (myText) {myText.value = ''; // Defina o valor do conteúdo do texto como um caractere nulo} </SCRIPT> <input type = "text" value = "" onfocus = "clearContent (this)"/>Exemplo 6: Depois que o usuário insere a verificação do formato imediatamente
<script type = "text/javascript"> function validateTel () {// verificação de formato // obtenha o dom da caixa de texto var mytel = document.getElementById ("mytel"); var val = mytel.value; // Obtenha o valor inserido pelo usuário if (! // b [0-9]+/b/.test (val)) {// use alerta de verificação regular ('digite apenas números'); // Mensagem imediata de erro // modificar o estilo, atraia atenção mytel.style.border = '1px sólido vermelho'; } else if (val.length! = 11) {// O comprimento deve ser alerta de 11 bits ('o número do celular é de 11 bits'); // Responda à mensagem de erro // modifique o estilo para atrair atenção mytel.style.border = '1px sólido vermelho'; } else {// modifique o estilo para indicar que mytel.style.border = '1px sólido verde'; retornar true; }} </script> <input type = "text" value = "" id = "mytel" onblur = "validateTel ()"/>Exemplo 7: A borda da caixa de texto pisca ao inserir texto
É melhor escrever onfocus () e onblur () em pares!
<script type = "text/javascript"> // função inicialize função init () {// obtenha todo o texto dom var texts = document.getElementsByTagName ('input'); // transfira todas as caixas de texto para (var i = 0; i <texts.length; i ++) {var t = textos [i]; // caixa de texto atual var timer; // Evento de foco no supervisor t.onfocus = function () {var e = this; // retém a referência do dom // atual que começa a flash = setInterval (function () {// obtenha a variável de cor da borda atual var c = e.style.bordercolor; if (c == 'yellow') {// se for iseldyle.style.style.style.style.style.style.bordercolor; if (c == 'amarelo') {// se é color} else {// Caso contrário, a borda gira amarelo e.style.bordercolor = 'amarelo'; t.onblur = function () {// fala para eventos de licença // restaura a cor da borda t.style.bordercolor = ''; ClearInterval (Timer); // Clear Timer}}}} </script> <body style = "text-align: Center;" onLload = "init ();">O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.