?
Solved

onchange is not fired, IE bug ?

Posted on 2007-10-16
11
Medium Priority
?
998 Views
Last Modified: 2013-11-19
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>
0
Comment
Question by:avner
  • 6
  • 4
11 Comments
 
LVL 14

Expert Comment

by:Jai S
ID: 20084294
after the minimize and maximize the contrls are no longer editable...so onchange does not fire.....
0
 
LVL 14

Author Comment

by:avner
ID: 20084304
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20084755
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 14

Author Comment

by:avner
ID: 20085615
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20085678
What exactly is the processing you need to do?
On what browsers does ellipsis work?
0
 
LVL 14

Author Comment

by:avner
ID: 20090177
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
 
LVL 14

Author Comment

by:avner
ID: 20091135
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20091492
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
 
LVL 14

Author Comment

by:avner
ID: 20091561
mplungjan, Other suggestions to allow a field to be both editable and support ellipsis will be highly appriciated.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 20091756
<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
 
LVL 14

Author Comment

by:avner
ID: 20091923
Thank Michael, while not the original issue I posted, this (somewhat funny) approach will overcome the original issue I was facing, Thanks.

-Avner.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question