X Library Forums

You are not logged in.


New user registration is currently disabled.

#1 August 7, 2007 8:53:56 am

Registered: June 22, 2007
Posts: 73

Handling text input changes in Opera

I have a text input and I want to handle the input's value when it changes.  In IE and Firefox, I can do:

function handleChange() {
  var v = this.value;

var i = document.createElement('input');
i.type = 'text';
i.onchange = handleChange;

and pressing Enter or clicking in another field triggers handleChange() but in Opera, Enter doesn't do that.  I tried adding this:

function handleKeyup(event) {
   var evt = new xEvent(event);
   if (evt.keyCode == 13) {;
       return false;
   return true;
xAddEventHandler(i, 'keyup', handleKeyup, false);

and now pressing Enter triggers handleChange() twice in Opera.  Any thoughts...



#2 August 7, 2007 11:06:42 am

Registered: June 22, 2007
Posts: 73

Re: Handling text input changes in Opera

I found that if I specify just the key handler in Opera, it works.   It's as if the onchange handler doesn't work unless there's a key handler.

I also found an article ( ) which notes Opera doesn't have full support for onchange in inputs.

So, I'd like to do:

  if (testForOpera) {
    // set up key handler
  else {
    // set up onchange handler

But I'm not sure what to test.



#3 August 8, 2007 1:09:54 pm

From: France
Registered: June 20, 2007
Posts: 25

Re: Handling text input changes in Opera

if (!!window.opera)
alert('you are running opera);

i don't undertsand the use of !! but opera segfault (bug and stop) without it on my box!

you can also use

if ( navigator.userAgent.toLowerCase().agt.indexOf("opera") != -1)




#4 August 9, 2007 6:52:20 pm

From: Alabama, USA
Registered: April 27, 2007
Posts: 874

Re: Handling text input changes in Opera

Per the spec, pressing enter is not supposed to fire the change event. The change event occurs when a control loses focus and its value has changed.

In IE pressing enter focuses the submit button - so the text input loses focus and this causes a change event.

In FF pressing enter does not focus the submit button, yet the change event still occurs.

In Opera neither of the above occurs. One work-around is to call the text input's blur method when enter is pressed. This works but the change event doesn't fire until after the submit event.

I experimented with it some...

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Text Input OnChange Event</title>
<script type='text/javascript'>
window.onload = function()
  var e, i, d = document.getElementById('div1');
  var f = document.getElementById('form1');
  for (i = 0; i < 3; ++i) {
    e = document.createElement('input');  = = 'txt' + i;
    e.type = 'text';
    e.onchange = onEvent;
    e.onblur = onEvent;
    e.onfocus = onEvent;
    e.onkeydown = onEvent;
  f.onsubmit = onEvent;
function onEvent(e)
  e = e || window.event;
  var s = ' ' + + ', event.type: ' + e.type;
  if (e.keyCode) s += ', event.keyCode: ' + e.keyCode;
  if (window.opera && e.type == 'keydown' && e.keyCode == 13) this.blur();
  if (e.type == 'submit') return false;
  return true;
function msg(s)
  document.getElementById('dbg').innerHTML += '<p>' + s + '<\/p>';

<form id='form1' action='test.html'>
  <div id='div1'>
    <input type='submit'>
    <input type='button' value='Clear Msgs' onclick="document.getElementById('dbg').innerHTML = ''">

<div id='dbg'>


(select 'Load' to run the above)



Board footer

Powered by PunBB 1.2.15
Copyright © 2002–2005 Rickard Andersson

Expand Restore Select Format Eval Load