Question

我正在构建一个jQuery表单验证插件。该脚本使用title属性标记输入字段。这导致交换输入文本的输入密码，使字段标题可读。

$(FormID).find('input:password').each(function() {  
    $("<input type='text'>").attr({ name: this.name, value: this.value, title: this.title, id: this.id }).insertBefore(this); 
}).remove();

当我点击密码输入框时，它按预期工作。以下代码交换密码输入的文本输入，删除标签，应用适当的样式和焦点。

$(":input").focus(function(){//Clears any fields in the form when the user clicks on them       
   if ($(this).hasClass("va") ) {
        $(this).val('');
        $(this).removeClass("va").addClass('focused');
   }
});
$(':input[title]').each(function() {//Add the title attribute to input fields and disappear when focused 

    if($(this).val() === '') {
        $(this).val($(this).attr('title')); 
    }

    $(this).focus(function() {
        if($(this).val() == $(this).attr('title')) {
            $(this).val('').addClass('focused');
        }
        if ($(this).attr('id')=="pass1" || $(this).attr('id')=="pass2") {
            $("<input type='password'>").attr({ name: this.name, title: this.title, id: this.id }).insertAfter(this).prev().remove();
            $("#"+$(this).attr('id')).focus().addClass('focused');
        }
    });

    $(this).blur(function() {
        if($(this).val() === '') {
            $(this).val($(this).attr('title')).removeClass('focused');
        }
        if ($(this).attr('id')=="pass1" || $(this).attr('id')=="pass2") {
            $("<input type='text'>").attr({ name: this.name, value: this.value, title: passtitle, id: this.id }).insertAfter(this).prev().remove();
            $("#"+$(this).attr('id')).blur().removeClass('focused');
        }
    });
});

当用户在焦点输入框外单击时，模糊功能不会触发。如何让它像其他表单元素一样模糊？

Answer 1

更新：在彻底重新阅读您的问题后，我正在改变我的答案。

当输入未聚焦时，您基本上试图使输入元素的“标题”出现在框中。这是常见的事情，但您的方法已经过时。我建议使用HTML5“占位符”属性。它是任何现代浏览器的原生（我有一个旧浏览器和IE的解决方案）。但是，您仍然无法在密码字段中显示占位符文本。一般来说，在我看来，这根本不应该被要求甚至根本不需要。密码字段的外观通常与普通文本字段略有不同，因此更改输入可能会导致轻微的显示故障。

要使用占位符，只需按以下方式构建输入：

<input name="username" placeholder="Username" type="text" />

“占位符”属性将用于填充输入中显示的文本，但不会影响输入的实际值。

为了修复IE缺乏支持，我在github上创建了以下jquery placeholder plugin。

现在，这是一个比原始解决方案更清晰的完整工作示例。我已在FF17和IE9中测试过它。请注意，密码输入实际上是以TEXT字段开头的，因此默认显示占位符。如果用户聚焦并输入内容，它只会变为密码。

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.placeholder.js" type="text/javascript"></script>
</head>

<body>
    <form>
        <input name="username" placeholder="Username" type="text" />
        <input name="password" placeholder="Password" type="text" data-ispw="1" />
    </form>
</body>

<script type="text/javascript">
$(function(){
    // make sure to include the jquery.placeholder.js plugin before using this
    $(':text[placeholder]').placeholder();
    $('form').on({
        focus: function(e){
            // swap to password
            $(this).prop('type', 'password');
        },
        blur: function(e){
            var me = $(this);
            if (me.val() == '') {
                // swap to text; if no value is entered
                me.prop('type', 'text');
            }
        }
    }, ':input[data-ispw]')
});
</script>
</html>

让我重复一遍，我不喜欢像这样交换密码输入的想法，但是嘿，对每个人来说都是这样！祝你好运！

生成密码输入框的jQuery模糊和焦点问题

1 个答案: