Detect if input placeholder is visible

I'm trying to find a way to detect if an input is currently showing a placeholder.

I know we can test whether or not placeholders are supported in a given browser, which I would use, but that's not what I'm asking here.

The :placeholder-shown pseudo class does exactly what I need, but the support for it is very low. Much lower than the support for placeholders in general. So I'm looking for an alternative method.

Note: The solution cannot rely on whether or not the input has changed or gained a value. Autofilled inputs neither have a technical value, nor have changed. Therefore the solution needs to truly detect the placeholder it'self.

asked Feb 13 '16 at 21:41

Chase

99311018

add a comment |

I'm trying to find a way to detect if an input is currently showing a placeholder.

I know we can test whether or not placeholders are supported in a given browser, which I would use, but that's not what I'm asking here.

The :placeholder-shown pseudo class does exactly what I need, but the support for it is very low. Much lower than the support for placeholders in general. So I'm looking for an alternative method.

asked Feb 13 '16 at 21:41

Chase

99311018

add a comment |

I'm trying to find a way to detect if an input is currently showing a placeholder.

I know we can test whether or not placeholders are supported in a given browser, which I would use, but that's not what I'm asking here.

The :placeholder-shown pseudo class does exactly what I need, but the support for it is very low. Much lower than the support for placeholders in general. So I'm looking for an alternative method.

asked Feb 13 '16 at 21:41

Chase

99311018

I'm trying to find a way to detect if an input is currently showing a placeholder.

I know we can test whether or not placeholders are supported in a given browser, which I would use, but that's not what I'm asking here.

The :placeholder-shown pseudo class does exactly what I need, but the support for it is very low. Much lower than the support for placeholders in general. So I'm looking for an alternative method.

javascript jquery placeholder

asked Feb 13 '16 at 21:41

Chase

99311018

asked Feb 13 '16 at 21:41

Chase

99311018

asked Feb 13 '16 at 21:41

Chase

99311018

asked Feb 13 '16 at 21:41

Chase

99311018

asked Feb 13 '16 at 21:41

Chase

99311018

add a comment |

3 Answers
3

active

oldest

votes

First, check to see if the placeholder attribute is being used by the element, and then check to see if the value of the input is empty:

function placeholderActive(selector) {

  var el = document.querySelector(selector);

  if (el.getAttribute('placeholder') && el.value === '') {

    return true;

  }

  return false;

}





var a = placeholderActive('#test1'); // false

var b = placeholderActive('#test2'); // false

var c = placeholderActive('#test3'); // false

var d = placeholderActive('#test4'); // true



console.log(a, b, c, d);

<input id="test1" name="test1" value="123">

<input id="test2" name="test2" placeholder="" value="123">

<input id="test3" name="test3" placeholder="Some Placeholder" value="123">

<input id="test4" name="test4" placeholder="Another placeholder" value="">

edited Oct 1 '16 at 17:05

answered Feb 13 '16 at 21:57

Bowser

415

add a comment |

Add the required attribute to the input and then use :invalid to select the input that shows the placeholder.

This does not work with input types like email or inputs with a pattern attribute.

Using js is still the best option if you want it to work properly in all cases.

answered Feb 13 '16 at 21:52

seahorsepip

2,81411019

Thanks for the reply, but the required method only covers specific use cases, which many forms don't fall within. I'm looking for something less constrained.

– Chase
Feb 13 '16 at 21:57

add a comment |

Nowadays, for most browsers we can use :placeholder-shown pseudo-class to detect whether placeholder is shown or not.

function placeholderActive(selector) {

  return !!document.querySelector(selector + ':placeholder-shown');

}

const a = placeholderActive('#test1'); // false

const b = placeholderActive('#test2'); // false

const c = placeholderActive('#test3'); // false

const d = placeholderActive('#test4'); // true



console.log(a, b, c, d);

<input id="test1" name="test1" value="123">

<input id="test2" name="test2" placeholder="" value="123">

<input id="test3" name="test3" placeholder="Some Placeholder" value="123">

<input id="test4" name="test4" placeholder="Another placeholder" value="">

CSS-Tricks: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

CanIUse: https://caniuse.com/#feat=css-placeholder-shown

answered Nov 21 '18 at 4:21

Enzam Hossain

33926

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f35385653%2fdetect-if-input-placeholder-is-visible%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

First, check to see if the placeholder attribute is being used by the element, and then check to see if the value of the input is empty:

function placeholderActive(selector) {

  var el = document.querySelector(selector);

  if (el.getAttribute('placeholder') && el.value === '') {

    return true;

  }

  return false;

}





var a = placeholderActive('#test1'); // false

var b = placeholderActive('#test2'); // false

var c = placeholderActive('#test3'); // false

var d = placeholderActive('#test4'); // true



console.log(a, b, c, d);

<input id="test1" name="test1" value="123">

<input id="test2" name="test2" placeholder="" value="123">

<input id="test3" name="test3" placeholder="Some Placeholder" value="123">

<input id="test4" name="test4" placeholder="Another placeholder" value="">

edited Oct 1 '16 at 17:05

answered Feb 13 '16 at 21:57

Bowser

415

add a comment |

First, check to see if the placeholder attribute is being used by the element, and then check to see if the value of the input is empty:

function placeholderActive(selector) {

  var el = document.querySelector(selector);

  if (el.getAttribute('placeholder') && el.value === '') {

    return true;

  }

  return false;

}





var a = placeholderActive('#test1'); // false

var b = placeholderActive('#test2'); // false

var c = placeholderActive('#test3'); // false

var d = placeholderActive('#test4'); // true



console.log(a, b, c, d);

<input id="test1" name="test1" value="123">

<input id="test2" name="test2" placeholder="" value="123">

<input id="test3" name="test3" placeholder="Some Placeholder" value="123">

<input id="test4" name="test4" placeholder="Another placeholder" value="">

edited Oct 1 '16 at 17:05

answered Feb 13 '16 at 21:57

Bowser

415

add a comment |

First, check to see if the placeholder attribute is being used by the element, and then check to see if the value of the input is empty:

function placeholderActive(selector) {

  var el = document.querySelector(selector);

  if (el.getAttribute('placeholder') && el.value === '') {

    return true;

  }

  return false;

}





var a = placeholderActive('#test1'); // false

var b = placeholderActive('#test2'); // false

var c = placeholderActive('#test3'); // false

var d = placeholderActive('#test4'); // true



console.log(a, b, c, d);

<input id="test1" name="test1" value="123">

<input id="test2" name="test2" placeholder="" value="123">

<input id="test3" name="test3" placeholder="Some Placeholder" value="123">

<input id="test4" name="test4" placeholder="Another placeholder" value="">

edited Oct 1 '16 at 17:05

answered Feb 13 '16 at 21:57

Bowser

415

First, check to see if the placeholder attribute is being used by the element, and then check to see if the value of the input is empty:

function placeholderActive(selector) {

  var el = document.querySelector(selector);

  if (el.getAttribute('placeholder') && el.value === '') {

    return true;

  }

  return false;

}





var a = placeholderActive('#test1'); // false

var b = placeholderActive('#test2'); // false

var c = placeholderActive('#test3'); // false

var d = placeholderActive('#test4'); // true



console.log(a, b, c, d);

<input id="test1" name="test1" value="123">

<input id="test2" name="test2" placeholder="" value="123">

<input id="test3" name="test3" placeholder="Some Placeholder" value="123">

<input id="test4" name="test4" placeholder="Another placeholder" value="">

function placeholderActive(selector) {

  var el = document.querySelector(selector);

  if (el.getAttribute('placeholder') && el.value === '') {

    return true;

  }

  return false;

}





var a = placeholderActive('#test1'); // false

var b = placeholderActive('#test2'); // false

var c = placeholderActive('#test3'); // false

var d = placeholderActive('#test4'); // true



console.log(a, b, c, d);

<input id="test1" name="test1" value="123">

<input id="test2" name="test2" placeholder="" value="123">

<input id="test3" name="test3" placeholder="Some Placeholder" value="123">

<input id="test4" name="test4" placeholder="Another placeholder" value="">

function placeholderActive(selector) {

  var el = document.querySelector(selector);

  if (el.getAttribute('placeholder') && el.value === '') {

    return true;

  }

  return false;

}





var a = placeholderActive('#test1'); // false

var b = placeholderActive('#test2'); // false

var c = placeholderActive('#test3'); // false

var d = placeholderActive('#test4'); // true



console.log(a, b, c, d);

<input id="test1" name="test1" value="123">

<input id="test2" name="test2" placeholder="" value="123">

<input id="test3" name="test3" placeholder="Some Placeholder" value="123">

<input id="test4" name="test4" placeholder="Another placeholder" value="">

edited Oct 1 '16 at 17:05

answered Feb 13 '16 at 21:57

Bowser

415

edited Oct 1 '16 at 17:05

answered Feb 13 '16 at 21:57

Bowser

415

answered Feb 13 '16 at 21:57

Bowser

415

answered Feb 13 '16 at 21:57

Bowser

415

add a comment |

Add the required attribute to the input and then use :invalid to select the input that shows the placeholder.

This does not work with input types like email or inputs with a pattern attribute.

Using js is still the best option if you want it to work properly in all cases.

answered Feb 13 '16 at 21:52

seahorsepip

2,81411019

Thanks for the reply, but the required method only covers specific use cases, which many forms don't fall within. I'm looking for something less constrained.

– Chase
Feb 13 '16 at 21:57

add a comment |

Add the required attribute to the input and then use :invalid to select the input that shows the placeholder.

This does not work with input types like email or inputs with a pattern attribute.

Using js is still the best option if you want it to work properly in all cases.

answered Feb 13 '16 at 21:52

seahorsepip

2,81411019

Thanks for the reply, but the required method only covers specific use cases, which many forms don't fall within. I'm looking for something less constrained.

– Chase
Feb 13 '16 at 21:57

add a comment |

Add the required attribute to the input and then use :invalid to select the input that shows the placeholder.

This does not work with input types like email or inputs with a pattern attribute.

Using js is still the best option if you want it to work properly in all cases.

answered Feb 13 '16 at 21:52

seahorsepip

2,81411019

Add the required attribute to the input and then use :invalid to select the input that shows the placeholder.

This does not work with input types like email or inputs with a pattern attribute.

Using js is still the best option if you want it to work properly in all cases.

answered Feb 13 '16 at 21:52

seahorsepip

2,81411019

answered Feb 13 '16 at 21:52

seahorsepip

2,81411019

answered Feb 13 '16 at 21:52

seahorsepip

2,81411019

answered Feb 13 '16 at 21:52

seahorsepip

2,81411019

Thanks for the reply, but the required method only covers specific use cases, which many forms don't fall within. I'm looking for something less constrained.

– Chase
Feb 13 '16 at 21:57

add a comment |

Thanks for the reply, but the required method only covers specific use cases, which many forms don't fall within. I'm looking for something less constrained.

– Chase
Feb 13 '16 at 21:57

Thanks for the reply, but the required method only covers specific use cases, which many forms don't fall within. I'm looking for something less constrained.

– Chase
Feb 13 '16 at 21:57

add a comment |

Nowadays, for most browsers we can use :placeholder-shown pseudo-class to detect whether placeholder is shown or not.

function placeholderActive(selector) {

  return !!document.querySelector(selector + ':placeholder-shown');

}

const a = placeholderActive('#test1'); // false

const b = placeholderActive('#test2'); // false

const c = placeholderActive('#test3'); // false

const d = placeholderActive('#test4'); // true



console.log(a, b, c, d);

<input id="test1" name="test1" value="123">

<input id="test2" name="test2" placeholder="" value="123">

<input id="test3" name="test3" placeholder="Some Placeholder" value="123">

<input id="test4" name="test4" placeholder="Another placeholder" value="">

CSS-Tricks: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

CanIUse: https://caniuse.com/#feat=css-placeholder-shown

answered Nov 21 '18 at 4:21

Enzam Hossain

33926

add a comment |

Nowadays, for most browsers we can use :placeholder-shown pseudo-class to detect whether placeholder is shown or not.

function placeholderActive(selector) {

  return !!document.querySelector(selector + ':placeholder-shown');

}

const a = placeholderActive('#test1'); // false

const b = placeholderActive('#test2'); // false

const c = placeholderActive('#test3'); // false

const d = placeholderActive('#test4'); // true



console.log(a, b, c, d);

<input id="test1" name="test1" value="123">

<input id="test2" name="test2" placeholder="" value="123">

<input id="test3" name="test3" placeholder="Some Placeholder" value="123">

<input id="test4" name="test4" placeholder="Another placeholder" value="">

CSS-Tricks: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

CanIUse: https://caniuse.com/#feat=css-placeholder-shown

answered Nov 21 '18 at 4:21

Enzam Hossain

33926

add a comment |

Nowadays, for most browsers we can use :placeholder-shown pseudo-class to detect whether placeholder is shown or not.

function placeholderActive(selector) {

  return !!document.querySelector(selector + ':placeholder-shown');

}

const a = placeholderActive('#test1'); // false

const b = placeholderActive('#test2'); // false

const c = placeholderActive('#test3'); // false

const d = placeholderActive('#test4'); // true



console.log(a, b, c, d);

<input id="test1" name="test1" value="123">

<input id="test2" name="test2" placeholder="" value="123">

<input id="test3" name="test3" placeholder="Some Placeholder" value="123">

<input id="test4" name="test4" placeholder="Another placeholder" value="">

CSS-Tricks: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

CanIUse: https://caniuse.com/#feat=css-placeholder-shown

answered Nov 21 '18 at 4:21

Enzam Hossain

33926

Nowadays, for most browsers we can use :placeholder-shown pseudo-class to detect whether placeholder is shown or not.

function placeholderActive(selector) {

  return !!document.querySelector(selector + ':placeholder-shown');

}

const a = placeholderActive('#test1'); // false

const b = placeholderActive('#test2'); // false

const c = placeholderActive('#test3'); // false

const d = placeholderActive('#test4'); // true



console.log(a, b, c, d);

<input id="test1" name="test1" value="123">

<input id="test2" name="test2" placeholder="" value="123">

<input id="test3" name="test3" placeholder="Some Placeholder" value="123">

<input id="test4" name="test4" placeholder="Another placeholder" value="">

CSS-Tricks: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

CanIUse: https://caniuse.com/#feat=css-placeholder-shown

function placeholderActive(selector) {

  return !!document.querySelector(selector + ':placeholder-shown');

}

const a = placeholderActive('#test1'); // false

const b = placeholderActive('#test2'); // false

const c = placeholderActive('#test3'); // false

const d = placeholderActive('#test4'); // true



console.log(a, b, c, d);

<input id="test1" name="test1" value="123">

<input id="test2" name="test2" placeholder="" value="123">

<input id="test3" name="test3" placeholder="Some Placeholder" value="123">

<input id="test4" name="test4" placeholder="Another placeholder" value="">

function placeholderActive(selector) {

  return !!document.querySelector(selector + ':placeholder-shown');

}

const a = placeholderActive('#test1'); // false

const b = placeholderActive('#test2'); // false

const c = placeholderActive('#test3'); // false

const d = placeholderActive('#test4'); // true



console.log(a, b, c, d);

<input id="test1" name="test1" value="123">

<input id="test2" name="test2" placeholder="" value="123">

<input id="test3" name="test3" placeholder="Some Placeholder" value="123">

<input id="test4" name="test4" placeholder="Another placeholder" value="">

answered Nov 21 '18 at 4:21

Enzam Hossain

33926

answered Nov 21 '18 at 4:21

Enzam Hossain

33926

answered Nov 21 '18 at 4:21

Enzam Hossain

33926

answered Nov 21 '18 at 4:21

Enzam Hossain

33926

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu