How to set the Empty Text

4 posts, 0 answers
  1. Anup
    Anup avatar
    2 posts
    Member since:
    May 2011

    Posted 20 Apr 2012 Link to this post


    For the Application > Form Elements > Text type standard box how does one specify the empty text. This is the text that appears in a standard textbox when do data has been entered. See iOS Contacts application when adding a New Contact the First, Last, Company appear grayed in the first three boxes almost like a watermark. 

    This improves the interface as it does not require us to set label text for each textbox and it looks closer to how the native iOS data entry forms work.
  2.
  3. Rudá Cunha
    Rudá Cunha avatar
    57 posts
    Member since:
    Mar 2010

    Posted 02 May 2012 Link to this post

    +1
  5. Arturo
    Arturo avatar
    4 posts
    Member since:
    Dec 2011

    Posted 02 May 2012 Link to this post

    I will do something like this 

    HTML:
    <input  type="text" id="firstName" class="watermark" />

    CSS:
    .watermark
    {
        color: #D3D3D3;
    }
      
    .unwatermark
    {
        color: Black;
    }


    Javascript:
    $('#firstName').text('First Name');
    $('#firstName').val('First Name');
    $(document).delegate(".watermark", "focus", function (e) {
       if ($(this).val() == $(this).text()){
           $(this).val('');
           var cssClass = $(this).attr('class');
           $(this).attr('class', cssClass.replace("watermark", "unwatermark"));
       }
    });
    $(document).delegate(".unwatermark", "blur", function (e) {
        e.preventDefault();
        if ($(this).val() == '') {
           $(this).val($(this).text());
           var cssClass = $(this).attr('class');
           $(this).attr('class', cssClass.replace("unwatermark", "watermark"));
       }
    });
  7. Arturo
    Arturo avatar
    4 posts
    Member since:
    Dec 2011

    Posted 03 May 2012 Link to this post

    You can also do this:

    <input id="firstName" type="text" value="" placeholder="First Name" autocomplete="off" />

    The magic key is placeHolder
  8.
Back to Top