Changing Placeholder Text with JavaScript Based on a Media Query?

Question

I am trying to write a JS script that will change the text values of inputs' placeholder attributes when the screen size hits a width of <= 400px, so that the text is shortened rather than cut-off on a smaller screen. I've looked around the site here and for other resources that can show me how to use media queries in JS, but so far, none have worked-- Either no change is seen at any width, or the shorter text is applied regardless of whether or not it is at/under 400. The code I have currently is shown below; it is one of the versions that shortens the text regardless of the width of the screen:

<script>
    if(document.documentElement.clientWidth < 400){
            $("[placeholder='State/Province']").attr('placeholder', 'State/Prov.');
            $("[placeholder='Vehicle Series']").attr('placeholder', 'Series');
            $("[placeholder='Engine Size']").attr('placeholder', 'Eng. Size');
            $("[placeholder='Transmission Type']").attr('placeholder', 'Trans.');
    }
</script>

Other variations I have tried to use as the "if" conditional are...

if(screen.width < 400px){...}

if(window.matchMedia("(min-width: 400px)")){...}

Other suggestions mentioned using event handlers and other methods, but if a media query-like solution is available, that's what I'd prefer to use. Either vanilla Javascript or jQuery will work. Any ideas and constructive advice will be appreciated-- Thank you.

http://stackoverflow.com/a/7715187/2729634 – tsg Mar 14 '17 at 16:21 — tsg, Mar 14 '17 at 16:21

score 0 · Answer 1 · answered Mar 14 '17 at 16:18

0

Try this:

if ($(window).width() < 400) {
 // Code here...
}

answered Mar 14 '17 at 16:18

medinasod

375
3
9

Thank you so much for the reply, but this made the longer version of the text reappear with no change at any width. This is one stubborn code block! lol – scoffin Mar 14 '17 at 16:25
Hmm.. Did you reload the page after changing the screen width? – medinasod Mar 14 '17 at 16:32
Yeah, a few times. Cleared the cache, too :-/ – scoffin Mar 14 '17 at 16:48
When I checked out the codepen in Chrome it didn't work-- Is there something in the Chrome dev tools that would prevent it from working? That's what I'm currently using to demo this-- it's worked for everything else, so I didn't see why it wouldn't work in this case, but maybe there is something funky about this kind of thing when resizing in Chrome? I checked it out on Blisk and the Codepen worked, so I checked to see if my code worked there, but is doesn't, so I'm still at a loss as to what's going on here... – scoffin Mar 14 '17 at 18:44
It's working for me in Chrome, so I don't think it's the dev tools. After making the screen smaller, I refresh the browser and the placeholder text changes. – medinasod Mar 14 '17 at 19:20
Hmmm... I'll fiddle with it some more and see what happens. I believe it's working and SHOULD work, I just don't why it's not working for ME lol If I find out why, I'll post an answer. – scoffin Mar 14 '17 at 19:51

Neil · Answer 2 · 2017-03-14T18:27:36.360

I would use two seperate attributes, one for larger screens, one for mobile. That way, you can have a more responsive design. For instance, what if a user opens your code in a very small window then scales it, they still have the mini version. But, in the new code, it the new placeholders will populate. Why not just add a hook that'll check for resize and modify the placeholder appropriately:

 $(window).resize(function () {
  if ($(document.body).width() < 400){ //your original issue was here
   $("input[placeholder-mobile]").each(function () {
    $(this).attr('placeholder', $(this).attr('placeholder-mobile'));
   });
  } else {
   $("input[placeholder-mobile]").each(function () {
    $(this).attr('placeholder', $(this).attr('placeholder-full'));
   });
  }
 });

 $(window).resize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder-full="State/Province" placeholder-mobile="State/Prov." type="text" /><br />
 <input placeholder-full="Vehicle Series" placeholder-mobile="Series" type="text" /><br />
 <input placeholder-full="Engine Size" placeholder-mobile="Eng. Size" type="text" /><br />
 <input placeholder-full="ransmission Type" placeholder-mobile="Trrans." type="text" />

Still no luck :( But thank you very much for replying-- It's an interesting suggestion. Wish I knew why none of this is working!! — scoffin, Mar 14 '17 at 18:26
The code does work... Maybe you have the resolution wrong on the phone or something. — Neil, Mar 14 '17 at 18:29

Changing Placeholder Text with JavaScript Based on a Media Query?

2 Answers2