9

does anyone know how to remove input placeholder using jquery?

I want to do is if one of the inputbox got a value...all the inputbox placeholder will be remove....does anyone know how to do that?

<input type="text" name="name" placeholder="1.)">
<input type="text" name="age" placeholder="2.)">
<input type="text" name="address" placeholder="3.)">

10 Answers 10

23

Should work:

$(':input').removeAttr('placeholder');
4

Get all the inputs, and attach a change event handler, inside the event handler get the value from all the inputs, join the values together, and if it's still nothing, none of the inputs have a value, if it has length, at least one of the inputs have value, and you can remove the placeholder attributes :

var inputs = $('input[type="text"]');

inputs.on('change', function() {
    if ( $.map(inputs, function(el) { return el.value; }).join('').length ) 
        inputs.removeAttr('placeholder');
});

FIDDLE

2
  • He might want that explaining a little :p Feb 28, 2014 at 14:39
  • 1
    @Archer - like that !
    – adeneo
    Feb 28, 2014 at 14:43
3

I DONT RECCOMEND to remove placeholder

instead, make a focus, and this will automatically hide placeholder at that moment:

$(element).focus();
1
  • This is the correct solution to me, because the placeholder will reappear when the text is removed from the input. You also can focus all your elements in sequence, so it does also work with multiple inputs. In the removeAttr solution the placeholder will stay removed until it is explicitly set as attire again.
    – Jankapunkt
    Mar 1, 2017 at 9:26
2

.removeAttr()

var txtbox = $('input[type="text"]');
txtbox.change(function () {
    txtbox.removeAttr('placeholder');
});
0
$('input[name="name"]').removeProp('placeholder');
0

You can change the placeholder to an empty string on keyup.

$("input[type=text]").keyup(function() {
    $("input[type=text]").attr("placeholder","")
});

JSFiddle demo

0

Would something like this work? Untested, but it should remove the placeholder attribute on the first change to any input.

var inputs = $('input');

inputs.one('change', function(){
    inputs.removeAttr('placeholder');
});
0

I've gone one step further, in case you also want this. This code will remove the placeholder text in all text inputs if any of them have a value, but if you then remove all the values it will put the placeholder text back. May not be necessary, but have it...

var $inputs = $("input:text");

$inputs.on("change", function() {
    if ($.map($inputs, function(el) { if (el.value) return o.value; }).length) {
        $inputs.each(function() {
            this._placeholder = this.placeholder;
            $(this).removeAttr("placeholder");
        });
    } else {
        $inputs.each(function() {
            this.placeholder = this._placeholder;
        });
    }
});

jsfiddle example...

0

if you want to reset it back to the original placeholder instead of removing it entirely try clearing the val() first then adding the attr()

$('#name').val('');

$('#name').attr('placeholder', 'whatever your previous placeholder was');

-1

try:

if ($(input).val()) {
$(input).attr("placeholder", "")
}
1
  • $(input) won't select any inputs, unless input is a string of value "input" (or similar), and you can't use val() on a collection - only singly objects. Feb 28, 2014 at 14:46

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.