CODEWITHSUNDEEP
javascriptjqueryhtml
rockstar
rockstar

Reputation: 3538

Unable to Watermark a text box in html

I have an HTML form that takes the user name,password & occupation. If the occupation happens to be a student then I create a new box using JavaScript to input the users university email. This works fine & I am also able to watermark the username and password boxes. However when the new university email box shows up i am unable to watermark it. I cant understand why. 

$('#editfill_occupation').change(function() {
    if ($("#editfill_occupation").val() == "0") {
        $('#editfill_uniemail').watermark("Please enter your university email address ");
        $('#editfill_uniemail').show();
    }
    else {
        $('#editfill_uniemail').hide();
    }
});​

My editfill_uniemail is defined like this :

<input type="text" name="editfill_uniemail"  id="editfill_uniemail" style="display: none;" >

I also tried to make use of the placeholder attribute in the above definition but it does not work . What am i possibly doing wrong ? or is not the write way to watermark ?

Upvotes: 1

Views: 2005

Answers (2)

A.M.K
A.M.K

Reputation: 16795

Have you tried an HTML placeholder attribute?

EDIT: I see that you have, but my code works correctly.

Demo: http://jsfiddle.net/SO_AMK/4nGdQ/

HTML: 

<select id="editfill_occupation">
    <option value="0">Providing demos for questions</option>
    <option value="1">Just kidding about that</option>
    <option value="2">But next time,</option>
    <option value="3">Please do your own :D</option>
</select>
<input type="text" name="editfill_uniemail" placeholder="Please enter your university email address" id="editfill_uniemail" style="display: none;" >​

The placeholder attribute is currently supported in all modern browsers except IE and will be supported in IE 10 (In this case, caniuse.com just doesn't show one in IE)

Don't forget a document.ready() handler...

Upvotes: 1

Tats_innit
Tats_innit

Reputation: 34107

Another demo http://jsfiddle.net/aXzuS/

You can accomplish this by using .focus and .blur API.

Good link: http://blogs.planetcloud.co.uk/mygreatdiscovery/post/A-simple-jQuery-watermark-textbox.aspx

Hope it fits the needs! :)

Code

$(document).ready(function() {

    var tbval = $('#hulk').val();

    $('#hulk').focus(function() {
        $(this).val('');
    });

    $('#hulk').blur(function() {
        $(this).val(tbval);
    });

});​

Upvotes: 1

Related Questions