How to keep text in textfield even after focus and remove on key press?

Go To StackoverFlow.com

0

I know I can use placeholder="some text here..." but how to make it so that the text will removed on key press instead of focus? Is it possible using CSS or how to achieve it using jQuery?

2012-04-05 19:08
by FoxKllD


2

If you would like a general solution that allows you to consider any default text value easily, consider this solution:

http://jsfiddle.net/KM43e/

All inputs of with a class name of "populated-text" will default to the text they are initialised with, and reset if you leave empty text in the field.

JavaScript:

jQuery(function ($) {

    // Removes the defualt text on key press
    function keyDown (e) {
        var input = $(e.target);

        if (input && !input.data('data-entered')) {
                input.data('data-entered', true);
                input.val("");
        }
    }

    // Restore the default text if empty on blur
    function blur(e) {
        var input = $(e.target);

        if (input && input.val() === "") {
                input.data('data-entered', false);
                input.val(input.data('blank-value'));
        }
    }

    $('.populated-text').each(function () {
        var input = $(this);
        input.data('blank-value', input.val());
        input.data('data-entered', false);
        input.keydown(keyDown);
        input.blur(blur);
    });

});​

Example inputs:

<input type="text" value="Some text here..." class="populated-text">
<input type="text" value="Any default text you like" class="populated-text">
<input type="text" value="Will be used as empty" class="populated-text">​
2012-04-05 19:55
by Matt Esch
Thnx! but could you make so that on focus the cursor would placed on the first line instead of between letters - FoxKllD 2012-04-06 02:55
http://jsfiddle.net/t5HMy/ - improved versio - Matt Esch 2012-04-06 10:38
Awesome! Exactly what I wanted! Thnx a lot man, couldn't do it by myself, learning jQuery - FoxKllD 2012-04-07 01:44
Could you explain each step of what you did? It would help me a lot! and again thn - FoxKllD 2012-04-07 02:51
Oh you dont have to explain I didnt check the code first, there were nice explaining comments! thn - FoxKllD 2012-04-07 03:22


1

It's not perfect but here's a stab at making a placeholder like new browsers:

JS--

//when the input is clicked, select it's text so the cursor doesn't start typing in the middle of your placeholder text
​$('input').on('click', function () {

    //by selecting the input on click we mimic the focus event
    $(this).select();
}).on('keyup', function () {

    //if the input is un-touched
    if (this.value == '' || this.value == '[Your Name]') {

        //make the input in-active
        this.className = '';

        //and make sure the placeholder is still showing
        this.value = '[Your Name]';
    } else {

        //since something has been entered into the input, add the active class to make the text black
        this.className = 'active';
    }
});​​​

CSS --

input {
    color : grey;
}
​input.active {
    color : black;
}​

This makes the input by default have grey colored text, and when the user enters something, it goes to black.

HTML --

​<input type="text" value="[Your Name]" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Here is a demo: http://jsfiddle.net/2VfwW/

You could add your placeholder to the placeholder attribute, then check for support for that attribute, and if it doesn't exist you could run the code above but start by making the value of each input the value of the placeholder attribute:

$(function () {

    //find all input elements with a placeholder attribute
    $('input[placeholder]').val(function () {

        //set the value of this input to the value of its placeholder
        return $(this).attr('placeholder');
    });
});
2012-04-05 19:14
by Jasper
Thnx, this one is the closest of what I wanted! But I got question how to point to the line before the first letter without removing text and so that when you press the text is replaces with input - FoxKllD 2012-04-06 02:48


0

Something like the below in jQuery should work.

$('#myElement').keypress(function() { this.val = ''; }
2012-04-05 19:11
by Michael Rice


0

Using Javacript:

<input type="text" onfocus="if(this.value == 'Your text'){this.value=''}" value='Your text' />
2012-04-05 19:11
by Fernando JS


0

If you have a value in a text field and want to clear it only when the user enters a key in the textfield, you can do this:

$("#myTextfield").keypress(function() {
    $(this).val("");
});

This next bit checks to see if the user has typed anything in the text field; if not, add a placeholder when it loses focus.

$("#myTextfield").blur(function() {
    if($(this).val() === "") {
        $(this).val("Search...");
    }
});
2012-04-05 19:12
by Elliot Bonneville
Ads