Jump to content
Junitar

Hiding an element when pressing accents/diacritical signs in inputs

Recommended Posts

Hi,

 

I'm trying to fake the placeholder attribute for a contact form using jQuery. To do so, I placed an input on top of a label tag (which is basically the value I want inside the input), and used jQuery to hide the label when pressing a key and show it back when the field is empty. I used the keypress and keyup events, like so:

jQuery(function($){
    $(".placeholder").each(function(){
        var label = $(this).find("label");
        var input = $(this).find("input");
        […]
        input.keypress(function(){
            label.stop().hide();
        });
        input.keyup(function(){
            if(input.val() == ""){
                label.stop().show();
            }
        […]
}); 

It works just as expected except if I start filling the input out with accents/diacritical signs which will just write on top of my label until I end up pressing a key that doesn't take accents.

Is there any chance to fix this issue? Ideally, I would like to make my label disappear when pressing any key.

 

Thanks for your help.

 

Edit: just added an example here https://jsfiddle.net/0kfp10Lf/3/

The label doesn't hide if I start filling out the input with any of the following keys ~ ^ ¨ ` ´, whether I combine them or not with a a, e, y, u, i, o or n. Otherwise, everything's fine.

Edited by Junitar

Share this post


Link to post
Share on other sites

You should be using the HTML 5 placeholder attribute: <input placeholder="First name">

 

But if you really want to use jQuery for it, you can use the oninput event and check that the value of the input is empty

input.on("input", function(e) {
  if(input.val().length > 0) {
    label.stop().show(); // Not sure what stop() is for, but I'll leave it here for now.
  } else {
    label.stop().hide();
  }
});

Share this post


Link to post
Share on other sites

Thank you very much for the fast reply. Managed to get it work perfectly with your code, just had to switch the show and hide method… I primarily used the 2 .stop() to stop an animation but I forgot to remove them.

 

I wanted to use jQuery to prevent compatibility issues with old versions of IE. Since I don't plan to add a label outside the inputs, I wanted to be sure to have something that indicates what each input is for. I thought it was the best method but maybe I'm wrong. What do you think? I'm learning everything on my own so I wouldn't be surprised if I'm doing it wrong.

Share this post


Link to post
Share on other sites

Which versions of Internet Explorer do you intend to support?

 

An overwhelmingly large amount of Internet Explorer users have IE9 or above which supports the placeholder attribute. I don't have statistics on me right now but I would estimate that at least 98 or 99 percent of Internet users have a browser that supports it.

 

On the subject of browser compatibility, the oninput event is not supported by very old versions of Internet Explorer.

Share this post


Link to post
Share on other sites

If I'm not mistaken, the oninput event is supported on IE6 so I guess I will go for the jQuery method this time.

 

I assume I'm trying to do too much but as long as I can I would like to write a code that's compatible with as many browsers as possible. It's probably unnecessary (and I guess it's a beginner's mistake) considering that I'm just making a simple photography website that will go unnoticed for most users…

 

Thanks again for your help!

Share this post


Link to post
Share on other sites

Frankly, IE6 and IE7 are big enough of a departure from other browsers that I don't support them any more. We don't even support IE8 or 9 here, actually. If Microsoft marks something as end of life, and someone finds a bug that only exists in an old browser, we don't fix it for free. Requiring support for IE6 or IE7 might pull down your whole project and not allow you to use several of the more advanced features that all major browsers support now. For reference, IE7 is older than the original iPhone.

Share this post


Link to post
Share on other sites

According to MDN, the input event is only supported on IE9 and above. https://developer.mozilla.org/en-US/docs/Web/Events/input

 

I would know if it existed in IE6 because I was already developing websites while IE6 was prevalent and the oninput event hadn't even been created yet.

 

Personally, I don't support browsers older than IE9. Even that's looking too far back in some peoples' opinions. There's no return on investment in trying to make workarounds for browsers nobody uses.

Share this post


Link to post
Share on other sites

Why not just use a default value that will act as placeholder, it will work in old and new browsers, you just test if empty show default value and then when it comes to submission, if default value or empty prevent submission.

Share this post


Link to post
Share on other sites

Because then you need to add Javascript to duplicate functionality which you have to go back to IE9 or Firefox 3.6 or Opera 10.1 to find a browser that doesn't support it. Every developer has to draw the line somewhere about which browsers to support and which to not support, and it's not unheard of to not bother to spend time to support a version of IE which is 3 versions behind. Anyone who has a computer that is capable of running IE9 can also run IE10 or IE11, so why put any effort at all into supporting IE9? Placeholder behavior and presentation should be left up to the user agent, there's no reason to try and copy that so that you can support a browser that a handful of people still use. If those people want to see placeholders then they can upgrade their browser. The latest versions of Firefox and Chrome will run on any major operating system.

 

This is the age-old argument. Essentially, you need to draw a line somewhere. These days, 5 years old is outdated.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...