Does the following use of JavaScript to handle html pose any risks?

Question

I wanted to use a "self-labelled" input fields to accept username and passwords with javascript as shown below. UX-wise, it seems to be working well. However, since I'm changing the "type" of the password-input field upon focus/blur, I'm concerned if this will pose any kind of risk. It probably should not, but just want to be sure.

<form method="post" action="/login">
    <fieldset>
        <h3>Login</h3>
        <input id="username" name="username" type="text" value="Username" onblur="if (this.value == '') { this.value = 'Username'; }" onfocus="if (this.value == 'Username') { this.value = ''; }"/>
        <input id="password" name="password" type="text" value="Password " onblur="if (this.value == '') { this.value = 'Password '; this.type = 'text' }" onfocus="this.type = 'password'; if (this.value == 'Password ') { this.value = ''; }"/>
        <input id="submit" name="submit" type="submit" value="Login"/>
    </fieldset>
</form>

Not an answer to the question, but beware of changing the type of input elements after they have been rendered as it will mess with some browsers. Consider instead showing\hiding different input elements. — beyond-code, Aug 02 '13 at 18:33

score 1 · Accepted Answer · answered Aug 02 '13 at 18:34

1

To do what you want, use input field placeholder:

<input type="password" placeholder="Password">

It will will work just fine in all modern browsers.

Have a look at DEMO in jsFiddle

answered Aug 02 '13 at 18:34

MightyPork

18,270
10
79
133

Wow! That's neat! No messy JS or hideous CSS to overlay a
over the input field! Thanks!
– Sterex Aug 02 '13 at 18:37
Of course. But I need to wait 10 minutes till after a question is asked. :) – Sterex Aug 02 '13 at 18:39
ah okay. Sorry for being impatient ;) – MightyPork Aug 02 '13 at 18:40

score 1 · Answer 2 · answered Aug 02 '13 at 18:36

1

I would suggest using the placeholder attribute since it does exactly what you are trying to do. There are also jquery/javascript components to emulate what placeholder does in the case of browsers that don't support html5.

answered Aug 02 '13 at 18:36

doogle

3,376
18
23

score 1 · Answer 3 · edited May 23 '17 at 12:03

1

For modern browser placeholder is perfect.No doubt.

But IE 7,8,9 as always lag.So no support for placeholders when it comes to IE<10.

Solution:This Polyfill will do exactly what you want.And its valid for all browsers.

https://github.com/parndt/jquery-html5-placeholder-shim/

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Refer:The best placeholder polyfil script for ie7, ie8 and ie9

edited May 23 '17 at 12:03

Community

1
1

answered Aug 02 '13 at 18:43

HIRA THAKUR

17,189
14
56
87

1

Thanks for the info! I do not intend to support IE right now. So, placeholder will work for me. However, this will help me in the future. – Sterex Aug 02 '13 at 18:54

Does the following use of JavaScript to handle html pose any risks?

3 Answers3