检测用户输入的文本框的值

Question

I have a textbox where I can enter values directly from keyboard or from mouse click. If I click from mouse the value is increment by one from the previous value. Whereas from keyboard I can enter any value. My question is how do I detect the value of the textbox entered by any user.

suppose if any value is entered by keyboard I need to reset to zero.

Here is what I got so far

function AddTrackingItem()
{
    var counter;


$("#Item_Count").keyup(function (event) {
    if(event.which == 13)
        counter = 0;   // if value is enter from keyboard then reset value
    else
    {
        counter = $("#Item_Count").val();
    }
});

TIA

Answer 1

I am assuming the html looks something like this:

<input type="text" id="item_count" value="0" />
<input type="button" id="btn" value="Increment"/>

You'll need an event handler for clicks on the button (obviously), and an event handler for the change event on the input field. The click on the button will not trigger the change event, but changing the input field manually will. Therefore we can safely reset the counter to 0 if the user alters the field.

$('#btn').on( 'click', function() {
  $('#item_count').val( function( i, oldval ) {
    return (oldval*1) + 1;
  } );
} );

$('#item_count').on( 'change', function() {
  $('#item_count').val( '0' );
} );

Edit: There are only two ways of entering data. One is by keyboard. The other one is by the button. That means that if the change event isn't triggered by the button, 100% of the cases where the change event is triggered, it must be via the keyboard. You can alter the code a bit to include the .data(...) ( docs ) functionality of jQuery and do something like the following code. It will reset the input when it was altered, and subsequently the button was pressed.

$('#btn').on( 'click', function() {
  $('#item_count').val( function( i, oldval ) {
    if( $(this).data( 'fromKeyboard' ) == 1 ) {
      $(this).data('fromKeyboard', 0 );
      return 1;
    }
    return (oldval*1) + 1;
  } );
} );

$('#item_count').on( 'change', function() {
  $(this).data( 'fromKeyboard', 1 );
} );

Example on jsbin .

Answer 2

if you don't want user to manually enter value in the textbox, why not make it readonly? Anyway, if you want to do what you insist to do. Here is how to do it.

$("#btn").click(function(){
    var currentVal = $("#item_count").val(); 
    var counter = parseInt(currentVal) + 1;
    $("#item_count").val(counter);
});

$("#item_count").keyup(function (event) {
    $("#item_count").val("0");
});

Notice that I don't have the listener for enter key event (13) because I change the value to 0 upon keyup. If you want to have the value change to 0 on enter key you can do what you have in your code. Remember to convert the string to int so you can add/increment the value. When you do a .val() it returns a string not int. Hope this helps. Let me know if you have any questions.