Deprecated: Function set_magic_quotes_runtime() is deprecated in /home4/mfoster/public_html/cb/forums/include/common.php on line 62

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 31

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 32

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 33

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 34
Cross-Browser.com / Handling text input changes in Opera

Cross-Browser.com

X Library Forums

You are not logged in.

Announcement

New user registration is currently disabled.

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

ChrisNelson
Member
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) {
       handleChange.call(this);
       return false;
   }
   return true;
}
...
xAddEventHandler(i, 'keyup', handleKeyup, false);



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

Offline

 

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

ChrisNelson
Member
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 ( http://forums.openqa.org/thread.jspa?messageID=4463 ) 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.

Offline

 

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

gebura
Member
From: France
Registered: June 20, 2007
Posts: 25
Website

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)
{
alert("opera!");
}



Ref: http://www.ewanmellor.org.uk/chip/chip.php?file=/javascript/sniffer.js&bcURL0=index.html&bcTitle0=Ewan+Mellor&bcURL1=/javascript/index.html&bcTitle1=JavaScript

Offline

 

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

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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');
    e.id  = e.name = 'txt' + i;
    e.type = 'text';
    e.onchange = onEvent;
    e.onblur = onEvent;
    e.onfocus = onEvent;
    e.onkeydown = onEvent;
    d.appendChild(e);
  }
  f.onsubmit = onEvent;
};
function onEvent(e)
{
  e = e || window.event;
  var s = 'element.id: ' + this.id + ', event.type: ' + e.type;
  if (e.keyCode) s += ', event.keyCode: ' + e.keyCode;
  msg(s);
  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>';
}
</script>
</head>
<body>

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

<div id='dbg'>
</div>

</body>
</html>


(select 'Load' to run the above)

Offline

 

Board footer

Powered by PunBB 1.2.15
Copyright © 2002–2005 Rickard Andersson

Expand Restore Select Format Eval Load