Problem with focusin/focusout using jquery in IE7 and Firefox 3.x.x

Question

Hi people

I'm currently pulling my hair of because of a very weird problem.

I have some input fields in which I have placed some text using some <span> elements.

On two of them my script is working great but on the last one it's acting a bit weird.

The HTML structure for the input fields are 100% identical.

I'm using the focusin/focusout events to either show or hide the text.

The code for achieving this is identical (and yes it could probably be written more efficient but I'll look into that at a later stage).

This code is working fine

// 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();
  }                 
});

And the HTML structure for this is the following

<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>

As mentioned the above code is working fine crossbrowser.

However the following code does not work in Firefox and IE7 even though it's identical.

$("input#fritekst").focusin(function(){
    $(this).parent().find(".sagsnummerLabel").hide();
});

$("input#fritekst").focusout(function(){
   if ($(this).val().length < 1){
     $(this).parent().find(".sagsnummerLabel").show();
   }                 
});

The HTML looks like this

<div id="fritekstholder">
  <label for="fritekst"><span class="sagsnummerLabel">F.eks. sagsnummer</span></label>
  <input type="text" name="fritekst" id="fritekst" />
</div>

But for some reason when the text is clicked in this box it is not being hidden. But if one clicks in an area of the input box where there is no text it does show/hide correctly.

To fix this I've written a click function to make sure the text is hidden once it's clicked.

It looks like this

// Defalut value i Fritekstsøgning
$(".sagsnummerLabel").click(function() {
  $(this).hide();
  $("input#fritekst").focus();
});

This workaround works in Firefox and does also hide the text in IE7...but once the input field loses focus the text is still missing in IE7.

It's probably something very simple that I'm missing but I think I've been staring at it for too long so I hope there is someone out there who can provide me with a solution :-)

Answer 1

Check first, you forgot to put ">" at closing span tag in your html.

Answer 2

Yes.It works only when the textbox is empty becasue of this codition.(if ($(this).val().length < 1))

For eg, if I set the focus when the textbox is empty, it will hide the label. Then,I typed something in the textbox and focus is blurred, the textbox will not be shown again because it's content lenght is gearter than one.

Do I understand what you mean correctly??