web-dev-qa-db-ja.com

キーダウン/キープレス後に入力値を取得する

を持っています <input type="text">、そしてテキストボックスのテキストが変更された後に関数を呼び出す必要があります（jQueryのkeydownおよびkeypressハンドラーの間に実行されるアクションを含みます）。

JQueryハンドラーから関数を呼び出すと、値（e.target.value）入力が追加される前と同じです。毎回手動で入力を値に追加したくないので、関数を呼び出して更新された値を使用させるにはどうすればよいですか？

javascriptjqueryjquery-events
22
Andrey Koltsov

私があなたを正しく理解しているなら、このようなものはあなたがそれをすることができる方法です

_$('input').bind('change keydown keyup',function (){
   /// do your thing here.
   //  use $(this).val() instead e.target.value
});
_

更新：03/05/13

注意してください：.on()とは対照的に.bind()を使用するほうがよいこと

JQuery 1.7以降、.on（）メソッドは、イベントハンドラーをドキュメントに添付するための推奨メソッドです。以前のバージョンでは、.bind（）メソッドは、イベントハンドラーを要素に直接アタッチするために使用されていました。ハンドラーはjQueryオブジェクトで現在選択されている要素にアタッチされるため、これらの要素は.bind（）の呼び出しが発生した時点で存在している必要があります。より柔軟なイベントバインディングについては、.on（）または.delegate（）のイベント委任の説明を参照してください。

詳細については jQuery Bind

26
Val

Keyupを使用できます。つまり、キーが解放された後にのみ呼び出すことができます。

$("#idofinputfield").keyup(function() {
    youFunction($(this).val());
});
16
Scoobler

試しましたか

$('#target').keyup(function(){       
     alert($(this).val());      
});
3
Jishnu A P

階層の上の要素にバインドする必要がある場合は、keyDownハンドラーでkeyUpイベントをサブスクライブできます。

$("#container").keydown(function (e) {
   //here you decide whether to handle the key event, and grab the control that sent the event 
   var myInput = e.target;
   $("#container").one('keyup', function() {
      console.log(myInput.val());  
      // do smth here
   });
});
1
Kosau

新しい文字が挿入される位置を取ることにより、将来の値を生成できます。

$('input').bind('keypress',function (){
   var value = e.target.value,
        idx = e.target.selectionStart,
        key = e.key;
        value =  value.slice(0, idx) + key + value.slice(idx + Math.abs(0));
    return yourfunction(value);
});
1
dobra

現在の入力値を取得するには、event.keyを使用する必要がありますテキストボックスに表示される前。

これがコードです。

function validate()
{
  document.getElementById("divOutput").innerHTML = event.key;
  //I am here returning false so that you can see that this value is being entered before the text is input. This is very useful for number validation purposes.
  return false;
}
Enter Number: <input type="text" id="txtInput" onkeydown="return validate()" /><br />
You Entered <div id="divOutput"></div>
0
vibs2006