Javascript 输入字段上的jQuery.replaceWith（）并在IE中重新获得焦点

有一个脚本

为空输入[type=text]和输入[type=password]元素设置从元素的title属性获取的默认文本

但对于密码元素来说，这并不是那么简单。如果我做了$this.attr'value'，$this.attr'title'；对于输入[type=password]，它只显示点而不是默认文本。在这种情况下，将元素类型从密码更改为文本也并没有得到广泛支持。因此，唯一的方法是将输入[type='password']替换为输入[type='text']elementutil.js:26。这种替换似乎重置了IE中的页面选项卡索引，并从页面的开头开始。其他浏览器的行为与预期相同

我找到了类似问题的解决方案，但对我来说不起作用

---

你知道如何修复它吗？

我今天碰巧写了一个函数来实现这一点，并找到了你的帖子。此函数通过使用延迟为1的setTimeout处理密码字段交换，以便下一个执行帧可以集中在元素上。只需从document.ready上下文调用水印

/** Support outerHTML in all browsers, from http://www.briangrinstead.com/blog/jquery-outerhtml-snippet */
$.fn.outerHTML = function() {
        var doc = this[0] ? this[0].ownerDocument : document;
        return $('<div>', doc).append(this.eq(0).clone()).html();
};


/** Lightweight way to have subtle title instructions in text fields. */
function watermark(exclude) {
        if (!exclude) exclude = '';

        $('input[type="text"], input[type="password"]').each(function(){
                var self = this;
                function setTitle() {
                        if (self === document.activeElement) return;    // Don't change the currently focused field
                        if (self.value.length == 0 && !$(self).is(exclude)) {
                                $(self).addClass('textLabel');
                                if ($(self).attr('type') == 'password') {
                                        var newSelf = $($(self).outerHTML().replace(/type=["]?password["]?/i, 'type="text"')).get(0);
                                        $(self).replaceWith(newSelf);
                                        self = newSelf;
                                        $(self).data('restorePassword', true).focus(focus).blur(blur);
                                }
                                self.value = $(self).attr('title');
                        }
                }
                setTitle();

                function focus(){
                        if(self.value == $(self).attr('title')) {
                                $(self).removeClass('textLabel');
                                if ($(self).data('restorePassword')) {
                                        $(self).removeData('restorePassword');
                                        var newSelf = $($(self).outerHTML().replace(/type=["]?text["]?/i, 'type="password"')).get(0);
                                        $(self).replaceWith(newSelf);
                                        self = newSelf;
                                        setTimeout(function() {$(self).focus().focus(focus).blur(blur);}, 1);
                                }
                                self.value = '';
                        }
                }
                function blur(){
                        setTitle();
                }

                $(self).focus(focus).blur(blur);
        });
}

---

谢谢sunetos。我已经修复了它，如果你想使用它，代码可以作为jquery插件使用。