Enter , onChange event on input type number

Question

I have an input type number. I Know how to call a function when enter key is pressed.

Please have a look at my code:

<input type="number" class="new_num" value="0">
<input type="number" class="new_num_2" value="0">

<script>
    $('.new_num').bind("enterKey",function(e) {
        alert($(".new_num").val());
    });

    $('.new_num').keyup(function(e){
        if(e.keyCode == 13)
        {
            $(this).trigger("enterKey");
        }
    });
</script>

Now I need to alert the value, when user just clicks the top or down arrow of number. I wrote this code, but it didn't work:

$('.new_num').bind('keyup input', function(){
    $(this).trigger("enterKey");
});

Please help.

Also i need to do this same operation for new_num_2. Do I need to duplicate the code?

What code do I need to write if user is using a mobile device?

Answer 1

This example logs the value of currently focused input in the console. I gave them both the same class=new_num_2 and used that to select them. This way you don't need to duplicate the code and do this same operation for new_num_2.

For mobiles I think you should put a button after the inputs and bind this function to the click of the button .

$('.new_num').on("focus", printValue);

var printValue = function (inp){
  $(inp).bind("enterKey",function(e) {
    console.log($(this).val());
  });
}

$('.new_num').keyup(function(e){
  if(e.keyCode == 13){
    printValue(this);
    $(this).trigger("enterKey");
    $(this).unbind("enterKey");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="new_num" id="new_num_1" value="0">
<input type="number" class="new_num" id="new_num_2" value="0">