disappearing and reappearing of text in textbox

Question

<asp:TextBox ID="TextBox2" runat="server" value="Your Text here" onfocus=" this.value = '';" onblur="if(this.value == '') ****{ this.value='?????'; }****"></asp:TextBox>

I want my text in textbox to disappear when i'm clicking in the textbox which i'm able to achieve by onfocus which i've used....

But,when the textbox is empty I want the previous entered value to appear and if it's d first time i.e.. if I've not entered any text previously then the default value("Your Text here") should appear.

Eg:I am clicking on the textbox for the first time and entering value '80' and then again i'm clicking on the textbox,the value inside should clear and if i'm not entering any value and clicking outside then '80' should show on textbox instead of 'Your Text here'.

Thanking you.

I think you're looking for a [text watermark](http://stackoverflow.com/questions/7433589/input-with-watermark-css-jquery). — Codesleuth, Feb 28 '13 at 09:51

score 2 · Answer 1 · answered Feb 28 '13 at 09:51

If your browser supports HTML5:

<input type="text" placeholder="Your Text here" />

If you want to support the placeholder attribute for browsers that doesn't support it by default, here is a javascript fallback:

$('[placeholder]').focus(function() {
   var input = $(this);
   if (input.val() == input.attr('placeholder')) {
       input.val('');
       input.removeClass('placeholder');
   }
}).blur(function() {
    var input = $(this);
    if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
    }
}).blur();

when I'm clicking the textbox the value is not getting cleared and if the textbox is empty it's not showing the previous value instead it's showing the default placeholder value only — Ashutosh Alexandar, Feb 28 '13 at 10:34

score 0 · Answer 2 · answered Feb 28 '13 at 10:02

0

You can do like this example. Declare a global variable, get the current value to that on blur, and on click make it null for the value, then reassign if the currently entered is null.

<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.1');
</script>
<body>
    <input type="text" value="Your text here" id="test" onclick="clicked();" onblur="outted();">
    <script>
    var pre_value = '';
    function clicked(){ pre_value = $('#test').val(); $('#test').val('');}

    function outted(){ if($('#test').val() == '') $('#test').val(pre_value); }
    </script>
</body>

hope it helps

answered Feb 28 '13 at 10:02

Hari

310
3
14

can u tell me an alternative where google.load is not used...a simple jQuery script with no google.load function used – Ashutosh Alexandar Feb 28 '13 at 11:51
@ashutosh: The google.load is not necessary for the code. The ordinary jquery include will work. I added it to make it stand alone. You can remove " " and instead add usual jquery script include. – Hari Mar 01 '13 at 04:49

disappearing and reappearing of text in textbox

2 Answers2