0

当我分离当前焦点元素并再次插入时，使用 Tab 键在字段中移动时遇到问题。请在jsfiddle中找到我的代码。. 另见下文：

JS代码：

$(document).ready(function() {
    $('.formElem').focusin(function() {
        // Remove default text on focus in
        if ($(this).val() == $(this).attr('title')) {
            $(this).val('').removeClass('defaultText');
            if (($(this).attr('id') == 'reg_pwd') || ($(this).attr('id') == 'reg_conf_pwd')) {
                id = '#' + $(this).attr('id');
                marker = $('<span>123</span>').insertBefore($(this));
                $(this).detach().attr('type', 'password').insertAfter(marker);
                marker.remove();

            }
            if ($(this).get(0) != $(':focus').get(0)) {
                $(this).focus();
            }
        }
    }).focusout(function() {
        // Remove default text on focus out
        if ($(this).val() === '') {
            $(this).val($(this).attr('title')).addClass('defaultText');
            if (($(this).attr('id') == 'reg_pwd') || ($(this).attr('id') == 'reg_conf_pwd')) {
                marker = $('<span>123</span>').insertBefore($(this));
                $(this).detach().attr('type', 'text').insertAfter(marker);
                marker.remove();
            }
        }
    });
});​

该代码将字段的类型从文本更改为密码并来回更改。当您单击或使用 Tab 到达密码字段时，它会在再次添加后失去焦点。谢谢，如果有人能找出原因。

4

1 回答 1

0

看来您使用的是 html5，所以也许您可以利用该placeholder属性。而不是<input value="blah" />使用<input placeholder="blah" />. 现在您甚至不需要拥有 defaultText 类，因此您可以删除它，以及您拥有的用于删除和添加类的关联 jquery 代码。

现在，您还可以将密码字段更改<input type="text" />为<input type="password" />。我不确定你想做什么<span>123</span>。所以也许，我不完全理解你的问题。但下面似乎完成了你试图做的效果。

一个 jsfiddle 以及http://jsfiddle.net/8BBRC/2

编辑：有错误的 jsfiddle 链接。

<input type="text" class="formElem" id="reg_fullname" name="fullname" placeholder="Full Name" title="Full Name" /><br />
<input type="email" class="formElem" id="reg_email" name="email" placeholder="Email Address" title="Email Address" /><br />
<input type="password" class="formElem" id="reg_pwd" name="pwd" placeholder="Confirm" title="Password" /><br />
<input type="password" class="formElem" id="reg_conf_pwd" name="conf_pwd" placeholder="Confirm Password" title="Confirm Password" /><br />
<input type="submit" id="reg_submit" value="Submit" /><br />
于 2012-12-20T23:15:01.160 回答