We often see some websites that want to fill out a form for registration. One is that when the text box has a focus, the text box prompts to disappear. If we leave the text box, the western-style file prompts will come out, below I will introduce some common code.
Method 1: directly in input
The Code is as follows: |
Copy code |
<Input type = "text" onfocus = "if (this. value = '') this. value = '';" onblur = "if (this. value = '') this. value = 'indicates what effect I want to see'; "value =" indicates what effect I want to see "style =" color: #666 "size =" 6 "id =" s_name "name =" s_name "> |
Method 2,
The Code is as follows: |
Copy code |
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <Html> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charsetGB2312"/> <Title> text disappears when the text box is clicked, and text appears when the focus is lost </title>
</Head> <Body> <Input type = "text" value = "enter your name" id = "myinput"/> </Body> </Html> <Script language = "JavaScript" type = "text/javascript"> Function addListener (element, e, fn) { If (element. addEventListener) { Element. addEventListener (e, fn, false ); } Else { Element. attachEvent ("on" + e, fn ); } } Var myinput = document. getElementById ("myinput "); AddListener (myinput, "click", function (){ Myinput. value = ""; }) AddListener (myinput, "blur", function (){ Myinput. value = "enter your name 1 "; }) </Script> |
Method 3: Implement using jquery
The Code is as follows: |
Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> jquery text box default text click disappears effect </title> <Script src = "jquery. min. js" type = "text/javascript"> </script> <Script type = "text/javascript"> $ (Document). ready (function (){ $ ("# Focus. input_txt"). each (function (){ Var thisVal = $ (this). val (); // Determine whether the value of the text box is null. If there is a value, the prompt is hidden and displayed if there is no value. If (thisVal! = ""){ $ (This). siblings ("# focus label"). hide (); } Else { $ (This). siblings ("# focus label"). show (); } // Focus input box Verification $ (This). focus (function (){ $ (This). siblings ("# focus label"). hide (); }). Blur (function (){ Var val = $ (this). val (); If (val! = ""){ $ (This). siblings ("# focus label"). hide (); } Else { $ (This). siblings ("# focus label"). show (); } }); }) $ ("# Keydown. input_txt"). each (function (){ Var thisVal = $ (this). val (); // Determine whether the value of the text box is null. If there is a value, the prompt is hidden and displayed if there is no value. If (thisVal! = ""){ $ (This). siblings ("# keydown label"). hide (); } Else { $ (This). siblings ("# keydown label"). show (); } $ (This). keyup (function (){ Var val = $ (this). val (); $ (This). siblings ("# keydown label"). hide (); }). Blur (function (){ Var val = $ (this). val (); If (val! = ""){ $ (This). siblings ("# keydown label"). hide (); } Else { $ (This). siblings ("# keydown label"). show (); } }) }) }) </Script> <Style type = "text/css"> Form {width: 400px; margin: 10px auto; border: solid 1px # E0DEDE; background: # FCF9EF; padding: 20px; box-shadow: 0 1px 10px rgba (0, 0, 0, 0.1) inset; font-family: Arial ;} . Tonjay {display: block; height: 40px; position: relative; margin: 20px 0 ;} # Focus label, # keydown label {position: absolute; line-height: 40px; left: 10px; top: 0; color: # ccc; cursor: text; background: none ;} . Input_txt {width: 398px; border: solid 1px # ccc; box-shadow: 0 1px 10px rgba (0, 0, 0, 0.1) inset; height: 38px; line-height: 38px; padding-left: 10px ;} . Input_txt: focus {box-shadow: 0 0 4px rgba (255,153,164, 0.8); border: solid 1px # B00000 ;} . Border_radius {border-radius: 5px; color: # B00000 ;} H2 {font-family: ""; text-shadow: 1px 1px 3px # fff; padding: 0; margin: 0 ;} </Style> </Head> <Body> <Form class = "border_radius" id = "focus"> <H2> the highlighted prompt disappears. <Div class = "tonjay"> <Input type = "text" class = "input_txt border_radius" id = "Input"/> <label for = "Input"> Net Registration of js special effects </label> </Div> <Div class = "tonjay"> <Input type = "text" class = "input_txt border_radius" id = "Input2"/> <label for = "Input2"> enter the user name </label> </Div> </Form> <Form class = "border_radius" id = "keydown"> <H2> the input prompt disappears. <Div class = "tonjay"> <Input type = "text" class = "input_txt border_radius" id = "Input3"/> <label for = "Input3"> Net Registration of js special effects </label> </Div> <Div class = "tonjay"> <Input type = "text" class = "input_txt border_radius" id = "Input4"/> <label for = "Input4"> enter the user name </label> </Div> </Form>
</Body> </Html> |