Home > Developer > Web Develop
jquery implements the TextArea text box with a translucent text hint effect:
TextArea text boxes are generally used to edit large sections of text, such as the editor or simple message reply and other functions, some in the TextArea text box has the default prompt language, the following describes how to use jquery to implement this function.
The code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">#divTips{Filter:Alpha (opacity=30); /*IE filter, transparency 50%*/-moz-opacity:0.3; /*Firefox private, transparency 50%*/Opacity:0.3;/*Others, transparency 50%*/position:Absolute;width:600px;Height:400px;Display:None;Color:Green;Z-index:Ten;padding:10px;}#txtNote{width:300px;Height:100px;}</style><Scripttype= "Text/javascript"src= "Mytest/jquery/jquery-1.8.3.js"></Script><Scripttype= "Text/javascript">$(function () { var$txtNote= $("#txtNote"); var$divTips= $("#divTips"); $txtNote. Focus (function () { //Hide when focus is placed$divTips. Hide (); }). blur (function() {$divTips. Toggle ($txtNote. val ()== ""). css ({" Left": $txtNote. Position (). Left,"Top": $txtNote. Position (). Top}); }); $divTips. Click (function() {$txtNote. focus (); }); $txtNote. blur ();});</Script></Head><Body>Message Board:<textareaID= "Txtnote"></textarea><DivID= "Divtips">Ant Tribe welcomes You</Div></Body></HTML>
The above code to achieve our requirements, the principle and code are relatively simple, here is not much introduction, more content can be read related reading.
Related reading:
1.focus events can be found in the section on the focus event in jquery .
The 2.hide () function can be found in the section of the Hide () method of jquery .
The 3.toggle () function can be found in the Toggle () method section of jquery .
The 4.css () function can be found in the section of the CSS () method of jquery .
The 5.position () function can be found in the section on the offset () and position () usage of jquery .
The 6.blur event can be found in the Blur event section of jquery .
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=12406
For more information, refer to: http://www.softwhy.com/jquery/
jquery implementation textarea text box with translucent text hint effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
