This example for you to share the Special JS text input box Web effects, for your reference, the specific content as follows
instance one: make the text box underlined only
<script type= "Text/javascript" >
function Changetextstyle () { //Make text box underlined
//Get the text box Dom
var MyText = document.getElementById ("MyText");
MyText.style.borderColor = ' black '; Set border color
MyText.style.borderStyle = ' solid '; Set border style to solid line
myText.style.borderWidth = ' 0 0 1px 0 ';//set border size, 0 represents no
}
</script>
Example two: initials or all uppercase letters
<script type= "Text/javascript" >
//Format checksum
function ValidateInput () {
//Get the DOM var myText1 of the text box
= 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 the error prompt character
//To determine whether to start with an uppercase letter if
(Val1!= ' && (Val1.charat (0) > ' Z ' | | val1.charat (0) < ' A ')) {
Stitching error character
errmsg = ' First Letter of text box 1 requires uppercase \ n '
; alert (errmsg);
}
if (val2!= ' &&!/\b[a-z]+\b/.test (val2)) {
//Stitching error characters
errmsg = ' text box 2 needs all uppercase letters \ n ';
alert (errmsg);
}
}
</script>
example Three: a text box that can only enter numbers
<script type= "Text/javascript" >
//Format checksum
function ValidateInput () {
//Get the DOM var myText of the text box
= document.getElementById ("MyText");
var val = mytext.value; Gets the user-entered value
if (!/\b[0-9]+\b/.test (val)) { //Use regular checksum
alert (' only enter Number '); Prompt error message
}
</script>
example four: validating an email format with regular expressions
<script type= "Text/javascript" >
//Format checksum
function ValidateInput () {
//Get the DOM var myText of the text box
= document.getElementById ("MyText");
var email = mytext.value; Get user Input Email
//define Regular expression
var emailreg
=/^ ([a-za-z0-9_-]) +@ ([a-za-z0-9_-]) + ((\.[ a-za-z0-9_-]{2,3}) {1,2}) $/;
if (emailreg.test (email)) { //To determine if the format required
alert ("Calibration pass, allow submission"); Through
}else{
alert ("Verify failed, check reenter");//validation failed
}
}
</script>
instance Five: Clear text box contents when focus
<script type= "Text/javascript" >
//clear content
function ClearContent (myText) {
mytext.value = '; Set the value of the text content to the null character
}
</script>
<input type= "text" value= "onfocus=" clearcontent (this)/>
Example six: immediately after the user entered the format check
<script type= "Text/javascript" >
function Validatetel () { //format checksum/
/Get the text box dom
var Mytel = document.getElementById ("Mytel");
var val = mytel.value; Gets the user-entered value
if (!/\b[0-9]+\b/.test (val)) { //Use regular checksum
alert (' only enter Number '); Prompt for error messages
//modify styles, causing attention
MyTel.style.border = ' 1px solid red ';
} else if (Val.length!=) { //length must be 11-bit
alert (' Mobile number is 11-bit '); Prompt for error messages
//modify styles, causing attention
MyTel.style.border = ' 1px solid red ';
} else{
//modified style, indicated through the
MyTel.style.border = ' 1px solid green ';
return true;
}
</script>
<input type= "text" value= "id=" Mytel "onblur=" Validatetel () "/>
instance Seven: The text box border flashes when you enter text
Onfocus () and onblur () are best written in pairs!
<script type= "Text/javascript" >
//initialization functions function
init () {
//Get all text dom
var texts = document.getElementsByTagName (' input ');
Iterate through all the text boxes for
(Var i=0;i<texts.length;i++) {
var t = texts[i];//current text box
var timer;
Listener Focus Event
T.onfocus = function () {
var e = this;//Keep reference to current DOM
//Start flashing timer Timer
= setinterval ( function () {
//Get the current border color variable
var c = e.style.bordercolor;
if (c = = ' yellow ') {//If the yellow
e.style.bordercolor = ';//restore primary color
}else{//Otherwise, the border becomes yellow
e.style.bordercolor = ' Yellow ';
}
},1000);//flashing every 1 seconds
};
T.onblur = function () {//Monitor departure event
//restore border color
t.style.bordercolor = ';
Clearinterval (timer);//Clear Timer}}}
</script>
<body style= "Text-align:center;" Onload= "Init ();" >
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.