1

请任何人都可以帮助我我在我的项目中遇到了与占位符相关的问题。它在 Mozilla、Chrome、safari..etc 中有效。但在 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 的文本框中显示正确的提示消息。我应该在文本框下显示提示消息，但我的客户要求是提示消息应该在文本框中显示（为了更好的外观）。我尝试使用“值”属性但它显示带点的密码提示消息而不是文本。请帮助我。高级感谢。

4

2 回答 2

5

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

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

于 2013-09-23T10:33:44.020 回答
1

我在这里为你做了一个工作小提琴

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>

查询：

$(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>

查询：

$(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();
        }
    });
});
于 2013-09-23T11:23:13.463 回答