I make an adaptive design and faced such a problem, it is necessary that the value of the placeholder changes depending on the screen resolution. Tell me, please, the script.

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

This can be implemented as with CSS and in particular media queries:

input.large { display: inline-block; } input.small { display: none; } @media (max-width: 600px) { input.large { display: none; } input.small { display: inline-block; } } 
 <input class="large" name="somename[]" placeholder="For large"> <input class="small" name="somename[]" placeholder="For small">

So with JS. And in this case, there are several options. For example, based on the resize event:

 var inp = document.querySelector('.my_input'); window.addEventListener('resize', function() { inp.setAttribute('placeholder', this.innerWidth >= 600 ? 'For large' : 'For small'); }); window.dispatchEvent(new Event('resize')); 
 <input class="my_input" name="somename" placeholder="For large">

The above option, you can write more like this:

 var inp = document.querySelector('.my_input'); window.addEventListener('resize', changePlaceholder); changePlaceholder.call(window); function changePlaceholder() { inp.setAttribute('placeholder', this.innerWidth >= 600 ? 'For large' : 'For small'); } 
 <input class="my_input" name="somename" placeholder="For large">

And you can use the matchMedia () method. This is a kind of media query in JS:

 var inp = document.querySelector('.my_input'), mediaQuery = window.matchMedia("screen and (max-width: 600px)"); mediaQuery.addListener(changePlaceholder); function changePlaceholder(mq) { if (mq.matches) { inp.setAttribute('placeholder', 'For small'); } else { inp.setAttribute('placeholder', 'For large'); } } changePlaceholder(mediaQuery); 
 <input class="my_input" name="somename" placeholder="For large">

I think you can still find a couple of ways. Some will be more cross-browser, some will not. The choice is yours.