onchange is not fired, IE bug ?

Hi all,
The below code demonstrate an odd beavior of IE (I'm working with IE6 at the moment).
The issue here is that in a specific scenario, even though a user is manually changing the contect of an INPUT field, the onchange event will not fire !

1. To recreate, paste the below code into any HTML code.
2. Focus the first input field.
3. enter whatever data (and do not tab out of the field!)
4. Lose focus from the IE window (or minimize it)
5. Open it again and lose focus of the field (or tab to the next field).
   As you can see the alert() is not called !

Any suggestions as to why thiis occuring ?


Please do not comment on the code itself (readonly, ellipsis etc..) this is just a repro example.

<code>

<script>
function setEllipsesText(sTarget,sValue)
{
      oField = document.getElementById(sTarget);
      oField.value=sValue;

};


function setEllipsesOff (oField)
{
      var oTR  = oField.createTextRange();
      oTR.select();
};



function insertValueToIdenticalInputs()
{
alert();
}

function  setEllipsesOn(oField1)
{
      var s = oField1.value;
      oField1.value="";
      window.setTimeout("setEllipsesText('" + oField1.id + "','" + s + "')"  , 0);
      oField1.readOnly=true;
};




</script>
<div style="left: 270px; width: 262px; top: 271px; height: 60px">
<input type='text' style="left: 0px;width: 256px;  text-overflow : ellipsis" id="aa" onchange="alert()" onfocus="setEllipsesOff(this)" onblur="setEllipsesOn(this)" />
<input type='text' style="left: 0px;width: 256px;  text-overflow : ellipsis" id="bb" onchange="alert()" onfocus="setEllipsesOff(this)" onblur="setEllipsesOn(this)"/>
      </div>


</code>
LVL 14
avnerAsked:
Who is Participating?
 
Michel PlungjanIT ExpertCommented:
<form>
<input type='text' style="left: 0px;width: 200px;  text-overflow : ellipsis" id="cc" value=""
onKeyUp="document.getElementById('ccr').value=this.value"
onBlur="this.style.display='none'; document.getElementById('ccr').style.display=''"
/>
<input onClick="this.style.display='none'; document.getElementById('cc').style.display='';document.getElementById('cc').focus();"
type='text' readonly="readonly" style="display:none; left: 0px;width: 200px;  text-overflow : ellipsis" id="ccr" value="" />
<input type="checkbox">
</form>
0
 
Jai STech ArchCommented:
after the minimize and maximize the contrls are no longer editable...so onchange does not fire.....
0
 
avnerAuthor Commented:
Not really.
you may want to comment out the line:
<quote>
oField1.readOnly=true;
</quote>


you'll see that it is not relevant and the issue persist.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Michel PlungjanIT ExpertCommented:
FF is even worse...

It is the onBlur / onFocus that you need to change...

Not a great idea to  try to alert in a blur/focus situation
0
 
avnerAuthor Commented:
mplungjan,
The alert is just for the sake of the example, the full code is not doing that.
The onblur/onfocus is a workaround for IE to handle the support for ellipsis in a field that is open for user to key in. otherwise the ellipsis indication does not work.
0
 
Michel PlungjanIT ExpertCommented:
What exactly is the processing you need to do?
On what browsers does ellipsis work?
0
 
avnerAuthor Commented:
Good question, mplungjan, maybe I should of started with the original issue all together..
I'm developing for IE6+ only, so no FF/Opera issues here.
The 'ellipsis' works on IE6 but requires the INPUT field to be "readonly", may problem is that I need the field to be editable for the user.
Example of a working input field:
<input type='text' readonly="true" style="text-overflow : ellipsis" id="cc" value="123444444444444444444444444444fgsdfg" />

This is why I need to add the "onfocus" to change the "readonly" property of the field.
Though, this reveals yet another IE bug, if you do not reset the x.value of the element with a setTimeout method (meaning Jscript engine is refreshing the screen first), the ellipsis will not take affect even if the value is over the input size.

If I find another workaround for this, this might sovle the original issue.
Thanks.
0
 
avnerAuthor Commented:
Issue resolved.
I belive this is an IE bug. If there is onblur defect that runs before onchange and the onblur functions updates the VALUE of the element, even though the value was originally modefied by the user, the onchange will not fire.

The fix was to simulate an onchange from the onblur function:


<script>
function setEllipsesOff (oField)/* onfocus*/
{
      var sState=oField.getAttribute("STATE");
      if (sState != "1" && oField.className != "disabled")
      {
            oField.readOnly=false;
            var oTR  = oField.createTextRange();
                  oTR.select();
            oField.setAttribute("ellipsisValue", oField.value);  //Preserve value
      }
      else
      {
            oField.setAttribute("skipOnBlur" , true);
      }

document.getElementById("tr").innerHTML= document.getElementById("tr").innerHTML+"-focus";
};



function  setEllipsesOn(oField1) /* onblur*/
{
      if (oField1.getAttribute("skipOnBlur"))
      {
            oField1.removeAttribute("skipOnBlur");
      }
      else
      {
      document.getElementById("tr").innerHTML= document.getElementById("tr").innerHTML+"-blur";
            var s = oField1.value;
            oField1.value="";
            window.setTimeout("setEllipsesText('" + oField1.id + "','" + s + "')"  , 0);
            oField1.readOnly=true;
      }
};

function setEllipsesText(sTarget,sValue)/* from onblur*/
{
      oField = document.getElementById(sTarget);
      oField.value=sValue;
      var oOrigValue = oField.getAttribute("ellipsisValue");
      if (oOrigValue!=null && oOrigValue != oField.value)
            {
                  onchangeBehavior(oField); //simulate onchange behavior;
                  oField.removeAttribute("ellipsisValue");
            }

document.getElementById("tr").innerHTML= document.getElementById("tr").innerHTML+"-timeout";
};

function onchangeBehavior(oField)
{

 insertValueToIdenticalInputs(oField)
}

function insertValueToIdenticalInputs(oField)
{
document.getElementById("tr").innerHTML= document.getElementById("tr").innerHTML+"-onchange("+ oField.value +")";
}

</script>
<div id="tr"></div>
<div style="left: 270px; width: 262px; top: 271px; height: 60px">
<input type='text' style="left: 0px;width: 100px;  text-overflow : ellipsis" id="aa" onfocus="setEllipsesOff(this)" onblur="setEllipsesOn(this)" value="99" /><br/>
<input type='text' style="left: 0px;width: 100px;  text-overflow : ellipsis" id="bb" onfocus="setEllipsesOff(this)" onblur="setEllipsesOn(this)"/><br/>
with State="1" : <input type='text' style="left: 0px;width: 100px;  text-overflow : ellipsis;background-color:buttonface;color:black" readonly="true" value="tesing something here" STATE="1" id="cc" onfocus="setEllipsesOff(this)" onblur="setEllipsesOn(this)"/><br/>
With disabled classname: <input type='text' style="left: 0px;width: 100px;  text-overflow : ellipsis;background-color:buttonface;color:black" readonly="true" value="tesing something else"  class="disabled" id="dd" onfocus="setEllipsesOff(this)" onblur="setEllipsesOn(this)"/><br/>

<input type='text' readonly="true" style="left: 0px;width: 200px;  text-overflow : ellipsis" id="cc" value="123444444444444444444444444444fgsdfg" />
</div>


0
 
Michel PlungjanIT ExpertCommented:
Hmm, looks like a huge amount of effort for little gain, but great if you are happy.

you can ask for a PAQ and refund in the community service center
0
 
avnerAuthor Commented:
mplungjan, Other suggestions to allow a field to be both editable and support ellipsis will be highly appriciated.
0
 
avnerAuthor Commented:
Thank Michael, while not the original issue I posted, this (somewhat funny) approach will overcome the original issue I was facing, Thanks.

-Avner.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.