1

textboxキーボードまたはマウスのクリックから直接値を入力できる場所があります。マウスでクリックすると、値は前の値から 1 ずつ増加します。一方、キーボードからは任意の値を入力できます。私の質問は、ユーザーが入力したテキストボックスの値をどのように検出するかです。

キーボードで値が入力された場合、ゼロにリセットする必要があるとします。

これが私がこれまでに得たものです

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();
    }
});

ティア

4

2 に答える 2

1

私はhtmlが次のように見えると仮定しています：

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

ボタンをクリックするためのイベント ハンドラー (当然) と、入力フィールドの変更イベントのためのイベント ハンドラーが必要です。ボタンをクリックしても変更イベントはトリガーされませんが、入力フィールドを手動で変更すると変更イベントがトリガーされます。したがって、ユーザーがフィールドを変更した場合、カウンターを安全に 0 にリセットできます。

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

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

編集: データを入力する方法は 2 つしかありません。1つはキーボードによるものです。もう一つはボタンです。つまり、変更イベントがボタンによってトリガーされない場合、変更イベントがトリガーされるケースの 100% は、キーボード経由である必要があります。jQueryの.data(...)( docs ) 機能を含めるようにコードを少し変更して、次のコードのようにすることができます。入力が変更され、その後ボタンが押されたときに入力をリセットします。

$('#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 );
} );

jsbin の例。

于 2013-10-22T17:41:07.460 に答える
0

ユーザーがテキストボックスに手動で値を入力したくない場合は、読み取り専用にしてみませんか? とにかく、やりたいことをやりたいなら。方法は次のとおりです。

$("#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");
});

キーアップ時に値を 0 に変更するため、キー入力イベント (13) のリスナーがないことに注意してください。Enterキーで値を0に変更したい場合は、コードにあることを実行できます。値を追加/インクリメントできるように、文字列を int に変換することを忘れないでください。.val() を実行すると、int ではなく文字列が返されます。お役に立てれば。ご不明な点がございましたら、お知らせください。

于 2013-10-22T18:44:34.813 に答える