Onkeyup?

[GuitarGod]

Hi all,

 

I'm having some trouble with Javascript onkeyup, not quite sure why it's not working.

 

<script type="text/javascript">
document.getElementById( 'text_input' ).onkeyup = function()
{
// do stuff
}
</script>

<input type="text" id="text_input">

 

I know it can be done by adding onkeyup="myfunction()" to the input textbox, but for development purposes it would be easier done using the style above.

 

Any ideas?

[Amplivyn]

Post the script under the input text box or run "document.getElementById("text_input")" on page load or something. Your code currently doesn't work because "text_input" is not defined when you call it on line 2.

 

EDIT: Putting "document.getElementById("text_input")" inside a function and calling it later (after defining the element "text_input") also works.

[MarPlo]

Hi,

Add the <script> after the HTML that is accessed in the script. Because the code of the script is executed in the same moment when is loaded, and not see the html element wich is after it.

<input type="text" id="text_input">
<script type="text/javascript">
document.getElementById( 'text_input' ).onkeyup = function()
{
// do stuff
}
</script>

It is indicated to have the <script> before the closing </body>, where all the other html elements are loaded.

[Christian F.]

MarPlo: No, the correct method is to wrap the code in the "ready" event handler. Just like Amplivyn stated above you.

 

GuitarGod: I recommend looking into jQuery, it'll help make this a lot simpler. Both for it's .ready () function, and to bind the function to the event handler.

[codefossa]

Christian is correct. You should allow the page to load, then initiate your JS.

Demo: http://xaotique.no-ip.org/tmp/31/

 

HTML

<input type="text" id="myInput" />

 

Javascript

// Wait for page to load.
window.addEventListener("load", function()
{
   // Watch for keyup trigger.
   window.document.querySelector("#myInput").addEventListener("keyup", function()
   {
       // Remove numeric characters.  (Just for example use.)
       this.value = this.value.replace(/[0-9]/g, '');
   }, false);
}, false);