Question

由于一个非常奇怪的问题，我现在正在拉头发。

我有一些输入字段，其中我使用一些<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中的文本仍然缺失。

这可能是一件非常简单的事情，但我认为我已经盯着它看了太长时间，所以我希望有人可以为我提供解决方案： - ）

Answer 1

先检查，你忘了把“＆gt;”在你的html中关闭span标签。

Answer 2

是的。仅当文本框为空时才会起作用，因为这个编码。（ if（$（this）.val（）。length＆lt; 1））

例如，如果我在文本框为空时设置焦点，它将隐藏标签。然后，我在文本框中输入了一些内容并且焦点模糊，文本框将不会再次显示，因为它的内容长度比一个更宽松。

我明白你的意思吗？

在IE7和Firefox 3.x.x中使用jquery的focusin / focusout问题

2 个答案: