Javascript onkeyup user defined function

Question

I did well so far, but i am not able to implement this into an html object.

http://jsfiddle.net/fkyk2b8y/48/

Let's assume i have an html element like <input type='text' id="textareaID" onkeyup="myFunction(this.id)" /> and i'd like to implement like this :

function myFunction(elementID){
   $('#'+elementID).keypress(function (e){
      ...
      ...
      ...
   });
}

It doesn't work properly after implementation as you can try from the fiddle demo.

Thanks in advance.

---UPDATE---

I have many html outputs and they all have different ID values. I want to use same function for all of these html inputs. I don't know how to implement, otherwise JS side is working quite well.

Answer 1

you'r trying to put jQuery keypress event inside onkeyup function event...

just do that this way:

<input type='text' id="textareaID" />

and inside the :

 $("textareaID").keypress(function (e){
    if ( e.keyCode == (whatever you want) ) ...
 });

Answer 2

To be able to apply a function to all desired inputs, in order to achieve reusability, you can use a class instead of an id . So change <input id="textareaID" ... /> to <input class="textarea" ... />

Now define make your anonymous function a named one outside the event handler binding. So instead of:

$('#textareaID').keypress(function(e){ ... });

You'd have:

function reusableFunction(e){ ... }

$('.textarea').keypress(reusableFunction);

Also in your jsFiddle you need to replace a few document.getElementById 's for this . Here's your jsFiddle with said modifications . Notice I have 3 inputs like the original and if I want more I can just add the class .

I'd love to update my answer if I missed something, you don't mention why your function is broken and is not immediately obvious.

Answer 3

Let me understand this, do you want to call a jQuery function from a javascript function while passing the element's id? And then use both the element's id and the keypress event?? If so, it could be done like this,

<input type="text" onkeypress="callKeyPress(this.id);" id="textId" />

    <span id="keypressCode">0</span>

<script>

$(document).ready(function() {
    alert("function is ready to use now");
});



$.fn.keyPressFunction = function(id){
    alert("id is ---> "+id);

var keycode = (event.keyCode ? event.keyCode : event.which);
        $('#keypressCode').html(keycode);

    //do something with key code

}

function callKeyPress(id){
    alert(id);
    $.fn.keyPressFunction(id);

}
</script>

Answer 4

Is this what you want?

Html

<input type='text' id="textareaID1" />
<input type='text' id="textareaID2" />
<span></span>

Js

$('input[type=text]').on('keyup',function(e){
    $('span').html(this.id);
});

you stated in your comment that there can be many inputfields with different ids, so you can do this

Demo

http://jsfiddle.net/fkyk2b8y/50/

Answer 5

First of all, thank you for your patience and sharing information. This was what i really meant to do :

Html part :

<input type='text' id="textareaID" onkeypress="currencyChecker(event, this.id)" />
<span></span>

JS part: https://jsfiddle.net/fkyk2b8y/54/