This article has shared the special effects of special js text input box web page for your reference. The specific content is as follows
Example 1: Let the text box have only underlines
<script type="text/javascript"> function changeTextStyle(){ //Let the text box only have underscores//Get the text box's DOM var myText = document.getElementById("myText"); myText.style.borderColor = 'black'; //Set the border color myText.style.borderStyle = 'solid'; //Set the border style to a solid line myText.style.borderWidth = '0 0 1px 0'; //Set the border size, 0 means no}</script>Example 2: First letter or all letters capitalize
<script type="text/javascript"> //Format verification function validateInput(){ //Get the DOM of the text box var myText1 = document.getElementById("myText1"); var myText2 = document.getElementById("myText2"); var val1 = myText1.value; //Value of text box 1 var val2 = myText2.value; //Value of text box 2 var errMsg = ''; //Define error prompt character//Defend whether it starts with capital letters if(val1 != '' && (val1.charAt(0)>'Z' || val1.charAt(0)<'A')){ //Split error character errMsg = 'The first letter of text box 1 needs to be capitalized /n'; alert(errMsg); } if(val2 != '' && !//b[AZ]+/b/.test(val2)){ //Split error character errMsg = 'The first letter of text box 2 needs to be capitalized /n'; alert(errMsg); } }</script>Example 3: Text boxes that can only enter numbers
<script type="text/javascript"> //Format verification function validateInput(){ //Get the DOM of the text box var myText = document.getElementById("myText"); var val = myText.value; //Get the value entered by the user if(!//b[0-9]+/b/.test(val)){ //Use regular verification alert('Only enter numbers'); //Tip error message} }</script>Example 4: Verify the Email format with regular expressions
<script type="text/javascript"> //Format verification function validateInput(){ //Get the DOM of the text box var myText = document.getElementById("myText"); var email = myText.value; //Get the Email input by user //Define the regular expression var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((/.[a-zA-Z0-9_-]{2,3}){1,2})$/; if(emailReg.test(email)){ //Judge whether it meets the format requirements alert("Certification is passed, submission is allowed"); // Pass }else{ alert("Check failed, please check to re-enter"); //Verification failed} } }</script>Example 5: Clear the text box content when it becomes focus
<script type="text/javascript"> //Clear content function clearContent(myText){ myText.value = ''; //Set the value of the text content to a null character}</script><input type="text" value="" onfocus="clearContent(this)"/>Example 6: After the user enters the format check immediately
<script type="text/javascript"> function validateTel(){ //Format verification//Get the DOM of the text box var myTel = document.getElementById("myTel"); var val = myTel.value; //Get the value entered by the user if(!//b[0-9]+/b/.test(val)){ //Use regular verification alert('Only enter numbers'); //Prompt error message//Modify style, attract attention myTel.style.border = '1px solid red'; }else if(val.length != 11){ //Length must be 11-bit alert('Mobile phone number is 11-bit'); //Answer the error message//Modify the style to attract attention myTel.style.border = '1px solid red'; }else{ //Modify the style to indicate that myTel.style.border = '1px solid green'; return true; } }</script><input type="text" value="" id="myTel" onblur="validateTel()"/>Example 7: The text box border flashes when entering text
It is best to write onfocus() and onblur() in pairs!
<script type="text/javascript"> //Initialize function function init(){ //Get all text DOM var texts = document.getElementsByTagName('input'); //Transfer all text boxes for(var i=0;i<texts.length;i++){ var t = texts[i];//Current text box var timer; //Supervisor focus event t.onfocus = function(){ var e = this;//Retain the reference of the current DOM//The timer that starts to flash = setInterval(function(){ //Get the current border color variable var c = e.style.borderColor; if(c == 'yellow'){//If it is yellow e.style.borderColor = '';//Restore the primary color}else{//Otherwise, the border turns yellow e.style.borderColor = 'yellow'; } },1000);//Flashes every 1 second}; t.onblur = function(){//Speaks for leave events//Restores border color t.style.borderColor = ''; clearInterval(timer);//Clear timer} } } }</script><body style="text-align:center;" onload="init();">The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.