Question

有一个脚本

http://gist.github.com/457324

为空input[type=text]和input[type=password]元素设置默认文本（取自元素的title属性）。

对于密码元素，它并不是那么简单。如果我为$(this).attr('value', $(this).attr('title'));执行input[type=password]，则只显示点而不是默认文本。更改元素的类型（在这种情况下，从密码到文本）也不受广泛支持。所以唯一的方法是用input[type='password']元素替换input[type='text']（util.js：26）。这个替换似乎重置了IE中的页面选项卡索引，并从页面的开头开始。其他浏览器的行为符合预期。

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

你知道如何解决它吗？

Answer 1

我碰巧写了一个函数来完成今天这个并发现你的帖子。此函数通过使用延迟为1的setTimeout（）来处理密码字段交换，因此下一个“执行帧”可以关注该元素。只需从document.ready（）上下文中调用watermark（）。

/** 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);
        });
}

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

1 个答案: