Как сохранить некоторые входные тексты, удаленные с помощью jquery при возвращении в браузер?
У меня есть ошибка на следующей странице: http://jsbin.com/agedu/ Исходный код с некоторыми комментариями: http://jsbin.com/agedu/edit
Проблема в том, что при наборе чего-либо и выполнении запроса для отображения результатов поиска, если я возвращаюсь на страницу поиска в моем браузере (Firefox 3.5, но то же самое с IE8), мои поисковые термины больше не отображаются.
Он заменен серым текстом. Этот серый текст, который я хочу иметь, только когда нет заполненного текста.
Когда я удаляю код jQuery, если я выполняю поиск и нажимаю кнопку "вернуться" в моем браузере, заполненный текст все еще присутствует.
И даже с этим примером страницы: http://mucur.name/system/jquery_example/
Если я напишу какой-нибудь текст, загрузлю какой-нибудь другой URL в адресную строку, а затем нажму кнопку возврата, заполненный текст все еще присутствует, хотя его нет в моем коде.
Поэтому мой вопрос: есть ли у вас идеи, как сохранить этот текст, если он заполнен?
Должен быть способ определить, заполнен ли ввод, и избегать замены текста, если это так.
Это может происходить из браузеров и того, как они работают с JavaScript, но я не уверен в этом.
4 ответа
Вау, отладка этого заняла много времени, я думаю, вы должны использовать метод 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();
});
Протестировано в 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>
Когда вы инициализировали свой плагин, вы устанавливали сброс значений входов, я просто немного изменил рефакторинг и добавил следующую проверку:
if (this.value === '' || this.value === hvalue){
$(this).attr('value', hvalue).addClass(opts.hclass);
}
Я отделил эти операции от вашей цепочки соединений событий фокуса.
Теперь он будет устанавливать только значение по умолчанию (hvalue) и серый класс по умолчанию (hclass), если значение элемента '' или имеет значение по умолчанию.
Проверьте свой фрагмент здесь.
Функция 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.