Jump to content

Hiding an element when pressing accents/diacritical signs in inputs


Junitar
 Share

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
Link to comment
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();
  }
});
Link to comment
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.

Link to comment
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.

Link to comment
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!

Link to comment
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.

Link to comment
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.

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...