jQuery.replaceWith () на поле ввода и восстановление фокуса в IE

Question

Есть скрипт

http://gist.github.com/457324

, который устанавливает текст по умолчанию (взятый из атрибута title элемента) для пустых input[type=text] и input[type=password] элементов.

Для элементов пароля это не так тривиально. Если бы я сделал $(this).attr('value', $(this).attr('title')); для input[type=password], он бы просто показывал точки вместо текста по умолчанию. Изменение типа элемента (в данном случае от пароля к тексту) также не поддерживается широко. Таким образом, единственный способ - заменить input[type='password'] элементом input[type='text'] (util.js: 26). Эта замена, кажется, сбрасывает индекс вкладки страницы в IE и начинает с самого начала страницы. Другие браузеры ведут себя как положено.

Я нашел решение аналогичной проблемы здесь , но у меня это не работает.

У вас есть идеи, как это исправить?

Answer 1

Я случайно написал функцию, которая делает именно это сегодня, и нашел ваш пост. Эта функция обрабатывает замену поля пароля с помощью setTimeout () с задержкой 1, поэтому следующий «кадр» выполнения может фокусироваться на элементе. Просто вызовите watermark () из контекста 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);
        });
}