2

我正在构建一个 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');
        }
    });
});

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

4

1 回答 1

1

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

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

要使用占位符，只需像这样构建您的输入：

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

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

为了解决 IE 缺乏支持的问题，我不久前在 github 上创建了以下jquery 占位符插件。

现在，这是一个完整的工作示例，它比您的原始解决方案更干净。我已经在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>

让我重申一下，我不喜欢像这样交换密码输入的想法，但是，嘿，他们自己的！祝你好运！

于 2012-12-10T15:20:58.777 回答