IE中的占位符相关问题

Question

请有人可以帮助我我在项目中遇到了与占位符相关的问题。它在Mozilla，Chrome，safari等工作。但它在IE中无效。高级谢谢。

描述：

     <form class="">
             <input type="text" value="Email" id="inviteEmail"/>
             <input type="text" value="Password" id="invitePassword">
         </form>

     var defaultTextEmail = '&{"Email"}';
     var defaultTextPassword = '&{"general.password"}';

    $(document).ready(function() {
    $('#inviteEmail').bind('focus', function() {
        $('#inviteEmail').val(defaultTextEmail);
        var currentValue = $.trim($(this).val());
        if(currentValue == 'Email') $(this).val('');
    });
    $('#inviteEmail').bind('blur', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == '') $(this).val('Email');
    });



    $('#invitePassword').bind('focus', function() {
        $('#invitePassword').val(defaultTextPassword);
        var currentValue = $.trim($(this).val());
        if(currentValue == 'Password') {
            $(this).val('');
            $(this).prop('type', 'password');
        }
    });
    $('#invitePassword').bind('blur', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == '') {
            $(this).val('Password');
            $(this).attr('type', 'text');
        }
    });
});

现在它在所有浏览器的文本框中显示正确的提示消息而不是IE.I应该在文本框下显示提示消息，但我的客户端要求是提示消息应该在文本框中显示（为了更好的外观）。我试过'值'属性，但它显示密码提示消息带点但不显示文字。请帮助我。高级谢谢。

Answer 1

你可以通过jQuery解决这个问题。这是一种流行的修复方法：

https://github.com/mathiasbynens/jquery-placeholder

Answer 2

我为你Fiddle

做了一个工作HERE

HTML：

<form class="left push-bottom-px10 width-match-parent">
    <input type="text" id="email" value="email"/> 
    <input type="text" id="password" value="password"/> 
</form>

JQUERY：

$(document).ready(function() {
    $('#email').bind('focus', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == 'email') $(this).val('');
    });
    $('#email').bind('blur', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == '') $(this).val('email');
    });
    $('#password').bind('focus', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == 'password') {
            $(this).val('');
            $(this).attr('type', 'password');
        }
    });
    $('#password').bind('blur', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == '') {
            $(this).val('password');
            $(this).attr('type', 'text');
        }
    });
});

修改

由于更改类型属性的IE安全性，这种方式不起作用...当用户想要输入密码时，您可以使用fakepassword隐藏。像这样FIDDLE

HTML：

<form class="left push-bottom-px10 width-match-parent">
    <input type="text" id="email" value="email"/> 
    <input type="text" id="fakepassword" value="password"/> 
    <input type="password" id="password" value=""/>
</form>

JQUERY：

$(document).ready(function() {
    $('#password').hide();

    $('#email').bind('focus', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == 'email') $(this).val('');
    });
    $('#email').bind('blur', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == '') $(this).val('email');
    });
    $('#fakepassword').bind('focus', function() {
        $('#fakepassword').hide();
        $('#password').show().focus();
    });
    $('#password').bind('blur', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == '') {
            $('#fakepassword').show();
            $('#password').hide();
        }
    });
});