SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text input onchange 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:
    Code:
    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've found conflicting references on the web that say Opera does or does not support onchange in text inputs. I tried adding this:
    Code:
    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. I tried using just a keyup handler in IE and that doesn't work at all. Any thoughts...

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    using my example and Opera 9.22 in Windows XP SP2 I had no issues with the onchange event apart from Pressing Enter did not fire the event, yet switching from element to another, worked.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                window.onload = function() {
                    document.getElementById('test2').onchange = function() {
                        alert('element.onchange: ' + this.value);
                    };
                };
            </script>
        </head>
        <body>
            
            <input type="text" id="test1" onchange="alert('onChange=: ' + this.value);" />
            <input type="text" id="test2" />
    
        </body>
    </html>
    As you may see. The first textbox uses the onchange attribute of the element definition, and the second uses the onchange attribute via javascript alone.


  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Not quiet what I was getting at

    My goal is for Enter to trigger an action on Opera, Firefox, and IE. Not having bad behavior on Opera is fine but having it not do what I want isn't so great.

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why don't you use the onkeydown event on its own then?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function handleChange(source) {
                    alert(source + ':' + this.value);
                }
                window.onload = function() {
                    var el = document.getElementById('test');
                        el.onkeydown = function(e) {
                            if(!e) e = window.event;
    
                            var kCode = (e.which) ? e.which : e.keyCode;
                            if(kCode == 13)
                                handleChange.call(this, 'keydown');
                        };
                };
            </script>
        </head>
        <body>
            
            <input type="text" id="test" />
            
            <input type="text" id="test2" />
    
        </body>
    </html>


  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I tried to use just keyup handling, IE got all sorts of freaked out (I couldn't type in my input at all). I'll try again with keydown and see what I can get working. Thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •