Как сохранить некоторые входные тексты удалены с помощью jquery при возврате с браузером? - PullRequest
3 голосов
/ 14 июля 2009

У меня ошибка на следующей странице: http://jsbin.com/agedu/ Исходный код с некоторыми комментариями: http://jsbin.com/agedu/edit

Проблема в том, что при наборе чего-либо и выполнении запроса для отображения результатов поиска, если я возвращаюсь на страницу поиска в моем браузере (Firefox 3.5, но это то же самое с IE8), мои условия поиска больше не отображаются.

Он заменен серым текстом. Этот серый текст, который я хочу иметь только тогда, когда нет заполненного текста.

Когда я удаляю код jQuery, если я выполняю поиск и нажимаю кнопку «вернуться» в моем браузере, заполненный текст все еще присутствует.

И даже с этим примером страницы: http://mucur.name/system/jquery_example/

Если я напишу какой-нибудь текст, загрузю другой адрес в адресную строку, а затем нажму кнопку возврата, заполненный текст все еще присутствует, хотя его нет в моем коде.

Итак, мой вопрос: есть ли у вас идеи, как сохранить этот текст, если он заполнен?

Должен быть способ определить, заполнен ли ввод, и избегать замены текста, если это так.

Это может происходить из браузеров и того, как они работают с JavaScript, но я не уверен в этом.

Ответы [ 4 ]

1 голос
/ 14 июля 2009

Ух, отладка этого заняла много времени, я думаю, вы должны использовать метод val вместо использования атрибута 'value'.

В любом случае, проблемная строка в этом

$(this).attr('value', hvalue).addClass(opts.hclass).unbind('focus blur').bind('focus', 

В приведенной выше строке, когда вы присваиваете атрибут «значение», вы фактически изменяете значение текстового поля. Вы должны изменить его, только если он не пустой.

Я немного изменил ваш код, чтобы везде использовать метод val (), и он работает, как вы ожидали.

Рабочая демоверсия: http://jsbin.com/ihegu/

[Обратите внимание, как демо правильно отображает текст «Википедии», когда вы что-то ищете в Google, и нажимаете кнопку «Назад».]

 (function($) { 
    $.fn.inputdynvalue = function(options) 
    { 
        var opts = $.extend({}, 
        $.fn.inputdynvalue.defaults, options); 
        return this.each(function() 
            { 
            var hvalue = opts.htext; 
            switch (opts.htext) 
            { 
                case 'title': 
                    hvalue = $(this).attr('title'); 
                    break; 
                case 'value': 
                    hvalue = $(this).val();
                    break; 
            } 

            //Modify the text value ONLY if it's non empty. 
            if($(this).val() === '')
            {
               $(this).val(hvalue);
            }  

            //If title and value is same, apply the grey text class.
            if($(this).val() === this.title)
            {
               $(this).addClass(opts.hclass);
               //Why do you unbind the event?
            };

            $(this).bind('focus', 
            function() { 
                if ($(this).val() === this.title) { 
                    $(this).val('');
                    $(this).removeClass(opts.hclass); 
                } 
            });

            $(this).bind('blur', 
            function() { 
                if ($(this).val() === '') { 
                    $(this).val(this.title);
                    $(this).addClass(opts.hclass); 
                } 
            }); 
        }); 
    }; 
    $.fn.inputdynvalue.defaults = { 
        htext: 'title', 
        hclass: 'hint' 
    }; 
})(jQuery); 
$(document).ready(function() { 
    $("input[type='text']").inputdynvalue(); 
}); 
0 голосов
/ 14 июля 2009

Когда вы инициализировали свой плагин, вы настраивали сброс значений входов, я просто немного изменил рефакторинг и добавил следующую проверку:

        if (this.value === '' || this.value === hvalue){
          $(this).attr('value', hvalue).addClass(opts.hclass);
        }

Я отделил эти операции от вашей цепочки соединений событий фокуса.

Теперь он будет устанавливать только значение по умолчанию (hvalue) и класс серого по умолчанию (hclass) , если значение элемента равно '' или имеет значение по умолчанию .

Проверьте ваш фрагмент здесь .

0 голосов
/ 14 июля 2009

Проверено в IE8 и FF

Копируется из источника и модифицируется.

Некоторое время назад я создал элемент управления «Призрачный текст» в простом старом js, глядя на него в jQuery, я хочу вернуться и переписать его.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr"> 

<!--

  Created using http://jsbin.com
  Source can be edited via http://jsbin.com/oxeye/edit

-->

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<style type="text/css"> 
   .hint { 
    color: #C0C0C0; 
} 
</style> 

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>Test</title>
</head> 
<body> 

<form action="http://www.google.com/search?&q="> 
 <div class="saisie"> 
  <input type="text" id="lr_text" name="q" title="Google" />  
  <button type="submit">OK</button> 
 </div> 
 <div class="options"> 
  <label for="lang_en"><input type="radio" checked="checked" id="lang_en" name="lr" title="English Google" />English</label> 
    <label for="lang_fr"><input id="lang_fr" type="radio" name="lr" title="French Google" />French</label> 
  <label for="lang_de"><input id="lang_de" type="radio" name="lr" title="German Google" />German</label> 
  <label for="lang_es"><input id="lang_es" type="radio" name="lr" title="Spanish Google" />Spanish</label> 

 </div> 
</form> 
<form method="post" action="http://en.wikipedia.org/wiki/Special:Search?search="> 
 <div class="saisie"> 
  <input type="text" id="wikipedia_text" name="champ_wikipedia" title="Wikipedia" /> 
   <button type="submit">OK</button> 
 </div> 
 <div class="options"> 
 <label for="wik_en"><input type="radio" checked="checked" name="wikipedia" id="wik_en" title="English Wikipedia" />English</label> 
  <label for="wik_fr"><input type="radio" name="wikipedia" id="wik_fr" title="French Wikipedia" />French</label> 
 <label for="wik_de"><input type="radio" name="wikipedia" id="wik_de" title="German Wikipedia" />German</label> 
 <label for="wik_es"><input type="radio" name="wikipedia" id="wik_es" title="Spanish Wikipedia" />Spanish</label> 
 </div> 
</form> 

<script type="text/javascript">
    $(document).ready(function() {
        function setText() {
            var kf = this.title.split('|');
            if (kf.length < 0) return;
            if ($('#' + this.name + '_text').hasClass('hint')) {
                $('#' + this.name + '_text').val(kf[0]).addClass('hint');
            }
            $('#' + this.name + '_text').attr('title', kf[0]);
        }

        $("input[type='text']").inputdynvalue();
        $("input[type='radio']").click(setText);
    });

(function($) {
    $.fn.inputdynvalue = function(options) {
        var opts = $.extend({},
        $.fn.inputdynvalue.defaults, options);
        return this.each(function() {
            var hvalue = opts.htext;
            switch (opts.htext) {
                case 'title':
                    hvalue = $(this).attr('title');
                    break;
                case 'value':
                    hvalue = $(this).attr('value');
                    break;
            }
            //if value == title change class to 'hint'
            if ($(this).attr('value') == $(this).attr('title')) {
                $(this).addClass(opts.hclass);
            }
            $(this).attr('value', hvalue).unbind('focus blur').bind('focus',
            function() {
                if (this.value === this.title) {
                    this.value = '';
                    $(this).removeClass(opts.hclass);
                }
            }).bind('blur',
            function() {
                if (this.value === '') {
                    this.value = this.title;
                    $(this).addClass(opts.hclass);
                }
            });
        });
    };

    $.fn.inputdynvalue.defaults = {
        htext: 'value', //changed to value
        hclass: 'hint'
    };
})(jQuery);
$(document).ready(function() {
    //Set hint
    $("input[type='text']").blur();
});
</script>
<script type="text/javascript">
                 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
    var pageTracker = _gat._getTracker("UA-1656750-13");
    pageTracker._trackPageview();
</script></body></html>
0 голосов
/ 14 июля 2009

Функция inputdynvalue () явно вызывает текстовое поле при вызове, даже если текстовое поле не пустое.

Исправьте это так:

 (function($) {
    $.fn.inputdynvalue = function(options) {
        var opts = $.extend({},
        $.fn.inputdynvalue.defaults, options);
        return this.each(function() {
            var hvalue = opts.htext;
            switch (opts.htext) {
            case 'title':
                hvalue = $(this).attr('title');
                break;
            case 'value':
                hvalue = $(this).attr('value');
                break;
            }
            if (this.value === '') {
              $(this).attr('value', hvalue).addClass(opts.hclass)
            }
            $(this).unbind('focus blur').bind('focus',
            function() {
                if (this.value === this.title) {
                    this.value = '';
                    $(this).removeClass(opts.hclass);
                }
            }).bind('blur',
            function() {
                if (this.value === '') {
                    this.value = this.title;
                    $(this).addClass(opts.hclass);
                }
            });
        });
    };
    $.fn.inputdynvalue.defaults = {
        htext: 'title',
        hclass: 'hint'
    };
})(jQuery);

Ключ строки:

        if (this.value === '') {
          $(this).attr('value', hvalue).addClass(opts.hclass)
        }

, которые заменяют безусловную перезапись ранее.

Фиксированную версию можно увидеть по адресу http://jsbin.com/ikipi.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...