ansaurus

Question

How to get the new value of an HTML input after a keypress has modified it?

Answer 1

+2 A:

can you post your code? i'm not finding an issue with this. tested on firefox 3.01/safari 3.1.2 with:

function showMe(e) {
// i am spammy!
  alert(e.value);
}
....
<input type="text" id="foo" value="bar" onkeyup="showMe(this)" />

Owen 2008-10-21 17:45:01

I came home, checked my code out of subversion, and it worked just fine. I think I must have had a caching problem with the js file and it was stuck on handling keypress rather than keyup. Appreciate the effort in writing sample code so marking this as the answer :)

Paul Dixon 2008-10-21 20:08:28

Answer 2

A:

Here is a table of the different events and the levels of browser support. You need to pick an event which is supported across at least all modern browsers.

As you will see from the table, the keypress and change event do not have uniform support whereas the keyup event does.

Also make sure you attach the event handler using a cross-browser-compatible method...

domgblackwell 2008-10-21 17:45:02

Answer 3

A:

<html>
    <head>
        <script>
        function callme(field) {
            alert("field:" + field.value);
        }
        </script>
    </head>
    <body>
        <form name="f1">
            <input type="text" onkeyup="callme(this);" name="text1">
        </form>
    </body>
</html>

It looks like you can use the onkeyup to get the new value of the HTML input control. Hope it helps.

Neal Swearer 2008-10-21 17:47:01

Answer 4

A:

You can try this code (requires jQuery):

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
     $(document).ready(function() {
      $('#foo').keyup(function(e) {
       var v = $('#foo').val();
       $('#debug').val(v);
      })
     });
    </script>
</head>
<body>
    <form>
     <input type="text" id="foo" value="bar"><br>
     <textarea id="debug"></textarea>
    </form>
</body>
</html>

Marko Dumic 2008-10-21 17:51:51

Answer 5

+2 A:

There are two kinds of input value: field's property and field's html attribute.

If you use keyup event and field.value you shuld get current value of the field. It's not the case when you use field.getAttribute('value') which would return what's in the html attribute (value=""). The property represents what's been typed into the field and changes as you type, while attribute doesn't change automatically (you can change it using field.setAttribute method).

pawel 2008-10-21 18:00:56

ansaurus

tags:

views:

answers:

How to get the new value of an HTML input after a keypress has modified it?

related questions