Я сейчас тяну себя за волосы из-за очень странной проблемы.
У меня есть несколько полей ввода, в которые я поместил текст, используя некоторые элементы <span>.
Вкл.два из них, мой скрипт работает отлично, но на последнем он действует немного странно.
Структура HTML для полей ввода идентична на 100%.
Я использую focusin /события focusout для показа или скрытия текста.
Код для достижения этого идентичен (и, возможно, его можно было бы написать более эффективно, но я рассмотрю это на более позднем этапе).
Этот код работает нормально
// Defalut value i HVOR
$("input#hvor").focusin(function(){
$(this).parent().find(".spanHvorLabel").hide();
});
$("input#hvor").focusout(function(){
if ($(this).val().length < 1){
$(this).parent().find(".spanHvorLabel").show();
}
});
// Defalut value i VEJ
$("input#vej").focusin(function(){
$(this).parent().find(".spanVejLabel").hide();
});
$("input#vej").focusout(function(){
if ($(this).val().length < 1){
$(this).parent().find(".spanVejLabel").show();
}
});
И структура HTML для этого выглядит следующим образом:
<div class="yui-ac left" id="AutoSuggestPlace">
<label for="hvor"><span class="spanHvorLabel">By, postnr, kommune</span></label>
<input type="text" autocomplete="off" class="yui-ac-input ac_input" id="hvor" name="hvor"/>
</div>
<div class="left" id="AutoSuggestRoad">
<label for="vej"><span class="spanVejLabel">Vej</span></label>
<input type="text" id="vej" class="yui-ac-input ac_input" name="vej" autocomplete="off" />
</div>
Как уже упоминалось выше, код работает нормально, кроссбраузер.
Однако следующий код не работает в Firefox и IE7, даже если он идентичен.
$("input#fritekst").focusin(function(){
$(this).parent().find(".sagsnummerLabel").hide();
});
$("input#fritekst").focusout(function(){
if ($(this).val().length < 1){
$(this).parent().find(".sagsnummerLabel").show();
}
});
HTML выглядит следующим образом
<div id="fritekstholder">
<label for="fritekst"><span class="sagsnummerLabel">F.eks. sagsnummer</span></label>
<input type="text" name="fritekst" id="fritekst" />
</div>
Но по какой-то причине, когда текст щелкается в этомкоробка не скрываетсяНо если кто-то щелкнет в области поля ввода, где нет текста, он будет отображаться / скрываться правильно.
Чтобы исправить это, я написал функцию щелчка, которая гарантирует, что текст будет скрыт после его нажатия.
Это выглядит так
// Defalut value i Fritekstsøgning
$(".sagsnummerLabel").click(function() {
$(this).hide();
$("input#fritekst").focus();
});
Этот обходной путь работает в Firefox и также скрывает текст в IE7 ... но как только поле ввода теряет фокус, текст все еще отсутствует в IE7.
Возможно, я упускаю что-то очень простое, но я думаю, что слишком долго на это смотрю, поэтому я надеюсь, что найдется кто-то, кто может дать мне решение: -)