doforumda Posted March 23, 2010 Share Posted March 23, 2010 hi I am trying to create a textarea. There is a default text inside textarea. so when user clicks inside textarea then submit button appears and default text disappears and when user clicks somewhere else or outside textarea then it gets back to original state i.e, default text appears back and submit button disappears. here is what i did sofar. in this code when i click inside textarea then submit button does appear but text does not erase and when i click outside then button remains in sight. <!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>Untitled Document</title> <style> #submit { visibility: hidden; } </style> </head> <body> <form> <label>Message:</label> <textarea name="message" id="message" rows="5" cols="30">write message here!</textarea><br /> <input type="button" name="submit" id="submit" value="submit" /> </form> </body> <script type="text/javascript" src="lib/jquery-1.4.min(Production).js"></script> <script> var flag = false; $(document).ready(function () { $('#message').click(function () { flag = true; $('#submit').css('visibility','visible'); if(flag == true) { //alert(flag); var msg = $('#message').val(); //alert(msg); msg = ""; //alert(msg); } }); }); </script> </html> Quote Link to comment Share on other sites More sharing options...
Psycho Posted March 24, 2010 Share Posted March 24, 2010 I don't use JQuery, but here is a quick example in plain JS. You can repurpose for JQuery as needed: <html> <head> <style> #submit { visibility: hidden;} </style> <script type="text/javascript"> var defaultText = "write message here!"; function textFocus() { var textareaObj = document.getElementById('message'); var submitObj = document.getElementById('submit'); if (textareaObj.value==defaultText) { textareaObj.value = ''; } submitObj.style.visibility = 'visible'; } function textBlur() { var textareaObj = document.getElementById('message'); var submitObj = document.getElementById('submit'); if (textareaObj.value=='') { textareaObj.value = defaultText; } if (textareaObj.value==defaultText) { submitObj.style.visibility = 'hidden'; } } </script> </head> <body> <form> <label>Message:</label> <textarea name="message" id="message" rows="5" cols="30" onfocus="textFocus()" onblur="textBlur()">write message here!</textarea> <br /> <input type="button" name="submit" id="submit" value="submit" /> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.