search

mathiasbynens / jquery-placeholder

A jQuery plugin that enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet
https://mths.be/placeholder
MIT License
3.98k stars 1.34k forks source link

Password in clear in IE8 and validation with Javascript #191

Closed janosh-xx closed 9 years ago

janosh-xx commented 10 years ago

Hi Mathias look at this simple form:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="/jquery/jquery-1.10.2.js" charset="utf-8"></script>
        <script type="text/javascript" src="/jquery/plugins/jquery.placeholder.js" charset="utf-8"></script>

    </head>
    <body>
        <form name="f_login" id="f_login" action="javascript:do_submit();">
            <input id="inputName" name="inputName" placeholder="Username">
            <input id="inputPassword" name="inputPassword" placeholder="Password" type="password">
            <input type="submit" id="DoLogin" name="DoLogin" value="Login">
        </form>      
    </body>
<script type="text/javascript" charset="utf-8">
    $("#inputName").placeholder();
    $("#inputPassword").placeholder();
    function do_submit()
    {
        alert('login called');
        $('#inputPassword').val('');
    }
</script>
</html>

open the HTML page in IE8. simply press the "login" button, without inserting nothing in the two fields. the do_submit function is called, the alert is shown. Close the alert box. Now go in the password field and enter something: it is in clear text... Am I using placeholder in the wrong way? Thanks

janosh-xx commented 10 years ago

image

mathiasbynens commented 10 years ago

Link to an online demo that shows the issue. You’re probably using IE8 in IE7 mode or something.

peterwalsham commented 10 years ago

This is a bug that I've reproduced consistently on real IE8, and IE10 running in IE8/9 mode.

Here is a live demo: http://bl.ocks.org/peterwalsham/9228025 And the code behind it: https://gist.github.com/peterwalsham/9228025

If you have an empty password field displaying the placeholder and you call .val() to get the value, the input will become type="text" for ever more

On any password field, empty or not, if you call .val('') to clear the value the input will become type="text" for ever more

Setting non-empty string on a password field with .val('Frog') always seems to be fine

As people have pointed out in other issues this is due to $('my_password_id') retrieving the cloned input with type="text" rather than the original with type="password"

Issue #107 is related

janosh-xx commented 10 years ago

Actually I called the .val('') just to reset the password field after verification of the credentials (all this piece of code is not in the sample I have provided of course because it is not relevant to show the issue). Anyway, if it is recognized to be a bug, I'll wait for the fix before including this plugin in my website. Regards

manpreetbhasin commented 10 years ago

I resolved this issue at my end by adding following line of code - 

$(function () {
            $('input[placeholder]').focusin(function () {
                $('input[placeholder]').val('');
            });
            $('input[placeholder]').focusout(function () {
                $('input[placeholder]').placeholder();
            });
            $('input[placeholder]').placeholder();
        });
amerikan commented 9 years ago

@janosh can you change the following line:

<form name="f_login" id="f_login" action="javascript:do_submit();">

to use onsubmit rather than action:

<form name="f_login" id="f_login" onsubmit="do_submit();">

OR you can just use an event listener:

<form name="f_login" id="f_login">
<script type="text/javascript" charset="utf-8">
    $("#inputName").placeholder();
    $("#inputPassword").placeholder();

    $('#f_login').submit(do_submit); //when submitted ti will call the do_submit() method

    function do_submit()
    {
        alert('login called');
        $('#inputPassword').val('');
    }
</script>
amerikan commented 9 years ago

Should be fixed in latest version.