Unselectable text for search function

Question

Im looking to create an input text field that has greyed out text which shows what the text field is used for, this text should be then removed when a character is input

for example in facebook when you click on the search input text area, before you input any characters you will see the word "search" still displayed.

I don't know where to start in JQuery as I have no idea what this feature is called, but below is the mark-up for my input field

HTML Markup

<div class="searchForm">
   <input id="searchInput" value="Search"  autocomplete="off" name="searchInput"   
      onkeyup="showResult(this.value)"/>
   <input type="hidden" name="searchSite" value="1" style="background-color:#000;">
   <input id="searchButton" type="submit" value=""/>
</div>

I just found this link which might help people in the future http://viget.com/inspire/a-better-jquery-in-field-label-plugin — mk_89, May 25 '12 at 21:36
you can wrap the the input with a div tag, position it relatively, append an absolute span as a placeholder and on focus remove it. — Ram, May 25 '12 at 21:38

score 3 · Answer 1 · answered May 25 '12 at 21:26

3

You can use html 5 attribute placeholder like this:

<input id="searchInput" type="text" placeholder="Search" name="searchInput" />

answered May 25 '12 at 21:26

WojtekT

4,735
25
37

Thats a great answer, it worked well, just wondering what can I do about browsers which don't support html 5? – mk_89 May 25 '12 at 21:30

score 2 · Answer 2 · answered May 25 '12 at 21:30

There are a few ways to do this. Using HTML5 this can be easily achieved by using a placeholder attribute. This allows you to define the text within the HTML element, and on focus this will disappear.

<input id="searchInput" value="Search"  autocomplete="off" name="searchInput" placeholder="Search"   
      onkeyup="showResult(this.value)"/>

Other JavaScript ways of doing this are to use methods which clear the text on focus or click etc.

$('input#searchInput').focus(function() {
    $(this).value('');
});

The jQuery version (not JS) make text disappears if the user doesn't type anything after the input got and lost focus. The original text should reappear in this case. — FelipeAls, May 25 '12 at 21:33

score 1 · Answer 3 · edited May 23 '17 at 10:34

This is from another answer of mine. And this is working example of this code piece.

HTML

<div>
    <label for="search">Search this site</label>
    <input type="text" id="search" value="" />
</div>

CSS

body { padding: 20px; }

div { position: relative; }
div label { position: absolute; left: 8px; top: 4px; color: #666; z-index: 2; font: 11px arial; }
div input { position: absolute; padding: 3px 6px; border: 1px solid #ddd; border-radius: 2px; z-index: 1; font: 11px arial; }
.populated label { display: none; }
.focused label { color: #aaa; }

Javascript

$('input').on('keydown keypress keyup', function(e) {
    if($('input').val() == '') {
        $('div').removeClass('populated');
    }
    else {
        $('div').addClass('populated');
    }
}).on('focus', function(e) {
    $('div').addClass('focused');
}).on('blur', function(e) {
    $('div').removeClass('focused');
});

score 1 · Answer 4 · edited May 23 '17 at 12:26

1

If you're using HTML5, then you should use the placeholder attribute.

If you're using HTML4.01 or XHTML1.0 then see final edit of this question : unobtrusive "default" text in input WITHOUT jQuery (with jQuery, at last)

edited May 23 '17 at 12:26

Community

1
1

answered May 25 '12 at 21:30

FelipeAls

21,711
8
54
74

score 1 · Accepted Answer · answered May 25 '12 at 21:45

As the other answers suggested, I suggest using the HTML 5 placeholder attribute. For browsers that don't support this, you can add support as follows:

// This adds 'placeholder' to the items listed in the jQuery .support object. 
jQuery(function() {
    jQuery.support.placeholder = false;
    test = document.createElement('input');
    if ('placeholder' in test) jQuery.support.placeholder = true;
});

$(function() {
    // add placeholder support to browsers that wouldn't otherwise support it. 
    if (!$.support.placeholder) {
        var active = document.activeElement;
        $(':text,:password').focus(function() {
            if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                $(this).val('').removeClass('hasPlaceholder');
            }
        }).blur(function() {
            if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
            }
        });

        $(':text,:password').blur();
        $(active).focus();
        $('form:eq(0)').submit(function() {
            $(':text.hasPlaceholder,:password.hasPlaceholder').val('');
        });
    }
});

This code originated from here: http://www.cssnewbie.com/example/placeholder-support/

I modified it to support password fields (although they just show up as *'s) and have been using it successfully. I like it because I just use the HTML placeholder attribute and everything works good across the board.

Hope this helps!

I haven't tested this but would it be enough to just put this code in the head of my html page? — mk_89, May 25 '12 at 21:49
The new best practice seems to be to place your js code at the end of your page so that things load faster. Then you also don't have to wrap the code in $(document).ready() fn () {}); That said, my suggestion would be to place this in — christurnerio, May 25 '12 at 22:20

Unselectable text for search function

5 Answers5