Question

我想在我的注册表单中使用jQuery Masked Input Plugin（http://digitalbush.com/projects/masked-input-plugin/）。我的表单看起来像那样

...

<input  class="part1" type="text" name="lname"  value="Last Name" onfocus="if(this.value=='Last name') {this.style.color='#aea592';this.style.fontStyle='normal'; this.value=''};" onblur="if(this.value=='')  {this.style.color='#aea592'; this.style.fontStyle='italic'; this.value='Last name'}"  />
<input class="part2" type="text" id="dob" name="dob"  value="Date of Birth" onfocus="if(this.value=='Date of Birth') {this.style.color='#aea592';this.style.fontStyle='normal'; this.value=''};" onblur="if(this.value=='')  {this.style.color='#aea592'; this.style.fontStyle='italic'; this.value='Date of Birth'}" />

...

文件的结尾

<script src="core/code/js/mask.js"></script>
<script type="text/javascript">
jQuery(function($) {
    $('#dob').mask('99.99.9999', {placeholder:' '});
});
</script>

当您打开页面时，“姓氏”字段会显示“姓氏”字样，但出生日期不会显示任何内容。 http://prntscr.com/2miaa如何仅为onfocus事件激活掩码插件？

Answer 1

Yarr ......好的，首先不要在你的标记中添加这么多脚本。它难以阅读，而且维护起来会更加困难。让我们先尝试分离表单的样式和功能。

编辑：可以在http://jsfiddle.net/ninjascript/RuFHK/2/ 找到一个有效的例子

CSS

input { color: #aea592; }
input.default { font-style: italic; }

HTML

<input class="part1 default" type="text" name="lname" value="Last Name"/>
<input class="part2 default" type="text" id="dob" name="dob" value="Date of Birth"/>

的JavaScript

$('input').bind('focus', function() {
    var el = $(this);
    if (el.hasClass('default')) {
        el.removeClass('default').val('');
    }
});

phew ...好的，这有点容易理解。现在你只想在焦点上发生一件事，那就是将掩码应用于#dob元素中包含的值。这是编辑过的块：

$('input').bind('focus', function() {
    var el = $(this);
    if (el.hasClass('default')) {
        el.removeClass('default').val('');
    }
    if (el.attr('id') === 'dob') {
        $(this).mask('99.99.9999', {placeholder:' '});
    }
});

现在你的输入应该仅在获得焦点后被掩盖

。

如果您想确保在提交时返回某些值，您可以始终在“模糊”上验证内容。我真的不想为这个表单中的每个字段编写 if 语句，所以我只想映射每个字段名称及其默认值并参考：

var defaultValues = { 'lname': 'Last Name', 'dob': 'Date of Birth' };

现在，只要我需要使用默认值重新填充字段，我就可以参考该地图。在DOB字段的情况下，输入掩码插件看起来也有'unmask'选项。不幸的是，因为 mask 中的字符是#dob字段值的一部分，我们不能只检查空值。相反，我将使用一个正则表达式来检查除了空格和'。'之外的任何值。字符：

$('input').bind('blur', function() { var el = $(this); var name = el.attr('name'); // Really we only want to do anything if the field is *empty* if (el.val().match(/^[\s\.]*$/)) { // To get our default style back, we'll re-add the classname el.addClass('default'); // Unmask the 'dob' field if (name === 'dob') { el.unmask(); } // And finally repopulate the field with its default value el.val(defaultValues[name]); } });

表格输入焦点问题

1 个答案:

CSS

HTML

的JavaScript