1

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.

Improve this question
9
  • Why you need onclick on element and in javascript also? Commented Jun 18, 2015 at 12:55
  • @Tushar yes i realized that it is wrong, so how can i get the function(e)'s value without using .keypress ? Commented Jun 18, 2015 at 12:58
  • Use keypress in javascript, remove inline handler Commented Jun 18, 2015 at 13:00
  • What is exactly not working? it seems your function is been called by keypress, but then what is the desired output that you want? Commented Jun 18, 2015 at 13:01
  • @Newinjava 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. Commented Jun 18, 2015 at 13:07

5 Answers 5

Reset to default
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) ) ...
 });
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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.

Improve this answer

3 Comments

thank you for the answer. I have already thought of using class values. But i am using twitter bootstrap. So my inputs are like these <input type="text" class="form-control input-sm text text-right"> kind. So what do you offer ?
No problem. If you have class="form-control input-sm text text-right" you can always add another class at the end, like: class="form-control input-sm text text-right textarea"
As soon as i am able to try, i will give you the right answer. Thank you.
1

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>
Improve this answer

5 Comments

Yes that is what i am trying to do. I will try this one too and feedback. Thank you so much.
sure.. do let me know if it helps and if you get stuck again anywhere
also note, you need not pass event exclusively to the function you are calling on keypress to get the key code..
Okay but how will the browser will bind them both ? Yes i am a little bit confused, sorry
when you say, onkeypress="callKeyPress(this.id);" . First, the keypress event is bound using onkeypress() function call, second, we pass the element's id exclusively using this.id. This bit is simple. Next when you call a jQuery function, i.e., $.fn.keyPressFunction(id) from within the onkeypress() function, the event is auto bound, i.e., the event object exists within the scope of the execution of preceding callKeyPress() function unless you say event.stopPropagation() and yeah, you pass the id of the element as well. I admit, it would sound a bit confusing, tried explaining it.
1

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/

Improve this answer

Comments

0

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/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.