JQuery Replace Input Text Based On Current Text

Question

How do I remove the value when element is selected?

<input type="text" value="Name" />

If the input box is selected, as in a single mouse click I want to clear the value. If there is not typed value when this input box, I want to restore stock value, in this case "Name". However, if there is something other than "empty space" in the box, it retains that string value.

$('input').on('select', function() {
    if(this).val() == 'Name') {
        $(this).val('');
    };
});

$('input'.on('unselect', function() {
    if($(this).val() == '') {
        $(this).val('Name');
    };
});

I am very aware the 'select' and 'unselect' are incorrect.

Suggestion: use `` instead. This is part of the HTML5 specification and supported by (relatively) modern browsers. Much simpler! — dsh, Jan 20 '16 at 21:48
Cool, that was the best solution, I can't mark as correct answer to a comment though :/ — marcwebdude, Jan 20 '16 at 21:52

Michał Perłakowski · Accepted Answer · 2016-01-20T21:49:10.810

4

Use focus and blur events:

$('input').on('focus', function() {
    if($(this).val() == 'Name') {
        $(this).val('');
    };
});

$('input'.on('blur', function() {
    if($(this).val() == '') {
        $(this).val('Name');
    };
});

Alternatively, use HTML placeholder attribute:

<input type="text" placeholder="Name" />

edited Jan 20 '16 at 21:49

answered Jan 20 '16 at 21:47

Michał Perłakowski

88,409
26
156
177

JQuery Replace Input Text Based On Current Text

1 Answers1