The text disappears when the js text box is clicked, and the text appears when the focus is lost.

Source: Internet
Author: User

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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.