Clever Geek Handbook

How to properly manage or do something to fill the focus area of ​​a form field?

I have a registration form with three fields:

Username

Email

Password

In most browsers, when the user clicks on a specific field, the displayed placeholder value is shaded, so the user can enter and if they don't print anything or leave the field, the placeholder text reappears. Anyway some browsers like chrome don't hide the onfocus placeholder text, so I had to write javascript to take care of that.

I am new to javascript, but for me the code I wrote to work with this seems to be wrong. I have a feeling it could be shorter and better.

For each field, I have this inside the document ready function:

$("#field_id").focusin(function() {
  $(this)[0].placeholder = "";
});
$("#field_id").focusout(function() {
  $(this)[0].placeholder = "Enter email";
});

My html:

<p><input class="signupFields" data-validate="true" id="user_username" name="user[username]" placeholder="Username" size="30" type="text" /></p>
 <p><input class="signupFields" data-validate="true" id="user_email" name="user[email]" placeholder="Email" size="30" type="text" /> </p>
<p><input class="signupFields" data-validate="true" id="user_password" name="user[password]" placeholder="Password" size="30" type="password" /> </p>

So, imagine that times are 3 .. It seems like a lot of code for such a simple requirement. Also I really don't like the fact that I am trying to emulate the javascripts document.getElementById. There must be a way I can do this more than in jQuery. Dislike [0].

Could some authority give me an example of a cleaner way to do it exactly the same?

respectfully

+3


source to share


2 answers


I would suggest that you don't have to worry about this, but to remove the focus placeholder text (and restore placeholder

to blur

), I would suggest the following:

$('input').focus(
    function(){
        $(this).data('placeholder',this.placeholder).removeAttr('placeholder');
    }).blur(
        function(){
            $(this).attr('placeholder',$(this).data('placeholder')).data('placeholder','');
        });​

JS Fiddle demo .

The only reason to use the notation $(this)[0]

is to "break out" of the jQuery-fied object $(this)

back into its own DOM node. To avoid this, it's easier to simply this

:



$('input').focus(
    function(){
        this.dataPlaceholder = this.placeholder;
        this.removeAttribute('placeholder');
    }).blur(
        function(){
            this.placeholder = this.dataPlaceholder;
            this.removeAttribute('dataPlaceholder');
        });​

JS Fiddle demo .

Literature:

+1


source


Assuming your html is like:

​<input id="username" type="text" placeholder="username"/>
​<input id="email" type="text" placeholder="email"/>
​<input id="password" type="text" placeholder="password"/>

your JS could be:



$("input").focusin(function() {
  $(this).data('placeholder',this.placeholder);//store the current placeholder
  this.placeholder = "";//no need for $(this)[0]
}).focusout(function() {
  this.placeholder = $(this).data('placeholder');//retrieve the stored placeholder
});​

this will target all of them with just one bit of code.

Here's a demo: http://jsfiddle.net/JKirchartz/SGZNQ/

+1


source






More articles:


All Articles