web-dev-qa-db-ja.com

onKeyPress中に入力テキストボックスのテキストを取得する方法は？

ユーザーが入力したテキストをテキストボックスに取得しようとしています（ jsfiddle playground ）：

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}
<input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

_コードはエラーなしで実行されますが、onKeyPressの実行中はinput textボックスのvalueは常に変更前の値：

enter image description here

質問：onKeyPress中にテキストボックスのテキストを取得するにはどうすればよいですか？

ボーナスチャッター

HTML DOMには「ユーザーが入力しています」に関連する3つのイベントがあります。

  • onKeyDown
  • onKeyPress
  • onKeyUp

Windowsでは、ユーザーがキーを押したときにWM_Keyメッセージの順序が重要になり、キーが繰り返され始めます。

  • WM_KEYDOWN('a')-ユーザーは A キー
  • WM_CHAR('a')-a文字がユーザーから受信されました
  • WM_CHAR('a')-a文字がユーザーから受信されました
  • WM_CHAR('a')-a文字がユーザーから受信されました
  • WM_CHAR('a')-a文字がユーザーから受信されました
  • WM_CHAR('a')-a文字がユーザーから受信されました
  • WM_KEYUP('a')-ユーザーがリリースした A キー

テキストコントロールに次の5文字が表示されます：aaaaa

重要な点は、繰り返されるWM_CHARメッセージに応答するということです。そうしないと、キーが押されたときにイベントを見逃します。

HTMLでは、状況が少し異なります：

  • onKeyDown
  • onKeyPress
  • onKeyDown
  • onKeyPress
  • onKeyDown
  • onKeyPress
  • onKeyDown
  • onKeyPress
  • onKeyDown
  • onKeyPress
  • onKeyUp

Htmlは、KeyDownおよびKeyPressをキーの繰り返しごとに配信します。また、KeyUpイベントは、ユーザーがキーを離したときにのみ発生します。

テイクアウェイ

  • IcanはonKeyDownまたはonKeyPressに応答しますが、input.valueが更新される前に両方とも発生します
  • onKeyUpに応答することはできません。テキストボックス内のテキストが変更されても応答しないためです。

質問：onKeyPress中にテキストボックスのテキストを取得するにはどうすればよいですか？

ボーナスリーディング

javascripthtmlinputonkeypress
74
Ian Boyd

inputイベントの処理は一貫したソリューションです。これは、すべての現代的なブラウザーのtextareaおよびinput要素に対して サポート であり、正確に起動します必要なとき：

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;
}
<input id="edValue" type="text" onInput="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

ただし、これを少し書き直します。

function showCurrentValue(event)
{
    const value = event.target.value;
    document.getElementById("lblValue").innerText = value;
}
<input id="edValue" type="text" onInput="showCurrentValue(event)"><br>
The text box contains: <span id="lblValue"></span>
7
YakovL

複雑にしないでおく。 onKeyPress()とonKeyUp()の両方を使用します。

<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">

これにより、（キーアップ後）最新の文字列値が取得され、ユーザーがキーを押した場合も更新されます。

jsfiddle： http://jsfiddle.net/VDd6C/8/

53
Jonathan M

onKeyPress中の入力テキストボックスの値は、常に変更前の値です

これは意図的なものです。これにより、イベントリスナーがキーの押下をキャンセルできます。

イベントリスナー イベントをキャンセル の場合、値は更新されません。イベントがキャンセルされない場合、値は更新されますが、イベントリスナーが呼び出された後になります。

フィールド値が更新された後に値を取得するには、次のイベントループで実行する関数をスケジュールします。これを行う通常の方法は、0のタイムアウトでsetTimeoutを呼び出すことです。

$('#field').keyup(function() {
    var $field = $(this);

    // this is the value before the keypress
    var beforeVal = $field.val();

    setTimeout(function() {

        // this is the value after the keypress
        var afterVal = $field.val();
    }, 0);
});

ここで試してください： http://jsfiddle.net/Q57gY/2/

Edit：一部のブラウザ（Chromeなど）は、バックスペースのキー押下イベントをトリガーしません。キープレスをコードのキーアップに変更しました。

19
Arnaud Le Blanc

コンパクトに保ちます。
キーを押すたびに、関数edValueKeyPress()が呼び出されます。
また、その関数でいくつかの変数を宣言および初期化しました。これにより、プロセスが遅くなり、より多くのCPUとメモリも必要になります。
このコードを使用できます-単純な置換から派生します。

function edValueKeyPress()
{
    document.getElementById("lblValue").innerText =""+document.getElementById("edValue").value;
}

必要なのはそれだけで、より高速です！

5
Wajahath

これまでのところ、完全なソリューションを提供する答えはありません。対処すべきいくつかの問題があります。

  1. すべてのキー押下がkeydownおよびkeypressハンドラーに渡されるわけではありません（たとえば、一部のブラウザーではバックスペースおよび削除キーが抑制されます）。
  2. keydownの処理はお勧めできません。キーを押してもキーが押されない場合があります！
  3. setTimeout()スタイルのソリューションは、ユーザーが入力を停止するまで、Google Chrome/Blink Webブラウザーでは遅延します。
  4. マウスおよびタッチイベントを使用して、切り取り、コピー、貼り付けなどのアクションを実行できます。これらのイベントは、キーボードイベントをトリガーしません。
  5. 入力メソッドによっては、ブラウザは、ユーザーがフィールドから移動するまで要素が変更されたという通知を配信しない場合があります。

より適切なソリューションは、keypress、keyup、input、およびchangeイベントを処理します。

例：

<p><input id="editvalue" type="text"></p>
<p>The text box contains: <span id="labelvalue"></span></p>

<script>
function UpdateDisplay()
{
    var inputelem = document.getElementById("editvalue");
    var s = inputelem.value;

    var labelelem = document.getElementById("labelvalue");
    labelelem.innerText = s;
}

// Initial update.
UpdateDisplay();

// Register event handlers.
var inputelem = document.getElementById("editvalue");
inputelem.addEventListener('keypress', UpdateDisplay);
inputelem.addEventListener('keyup', UpdateDisplay);
inputelem.addEventListener('input', UpdateDisplay);
inputelem.addEventListener('change', UpdateDisplay);
</script>

フィドル：

http://jsfiddle.net/VDd6C/2175/

4つのイベントすべてを処理すると、すべてのEdgeケースがキャッチされます。ユーザーからの入力を処理するときは、すべてのタイプの入力方法を検討し、ブラウザ間およびデバイス間の機能を検証する必要があります。上記のコードは、Firefox、Edge、およびデスクトップ上のChromeおよび私が所有するモバイルデバイスでテストされています。

3
CubicleSoft
<asp:TextBox ID="txtMobile" runat="server" CssClass="form-control" style="width:92%;  margin:0px 5px 0px 5px;" onkeypress="javascript:return isNumberKey(event);" MaxLength="12"></asp:TextBox>

<script>
    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        return true;
    }
</script>
3
raksh pal

したがって、各イベントには長所と短所があります。イベントonkeypressおよびonkeydownは最新の値を取得せず、一部のブラウザーでは印刷できない文字に対してonkeypressが起動しません。 onkeyupイベントは、複数の文字に対してキーが押されていることを検出しません。

これは少しハッキーですが、次のようなことをします

function edValueKeyDown(input) {
    var s = input.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: "+s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}

<input id="edValue" type="text" onkeydown="setTimeout(edValueKeyDown, 0, this)" />

すべての世界のベストを処理するようです。

1
dx_over_dt

event.keyを使用することにより、HTML入力テキストボックスに入力する前に値を取得できます。これがコードです。

function checkText()
{
  console.log("Value Entered which was prevented was - " + event.key);
  
  //Following will prevent displaying value on textbox
  //You need to use your validation functions here and return value true or false.
  return false;
}
<input type="text" placeholder="Enter Value" onkeypress="return checkText()" />
1
vibs2006

通常、フィールドの値を（つまり、更新される前に）キーイベントに関連付けられたキーと連結します。以下は最近のJSを使用しているため、古いIEでサポートを調整する必要があります。

最近のJSの例

document.querySelector('#test').addEventListener('keypress', function(evt) {
    var real_val = this.value + String.fromCharCode(evt.which);
    if (evt.which == 8) real_val = real_val.substr(0, real_val.length - 2);
    alert(real_val);
}, false);

古いIEの例のサポート

//get field
var field = document.getElementById('test');

//bind, somehow
if (window.addEventListener)
    field.addEventListener('keypress', keypress_cb, false);
else
    field.attachEvent('onkeypress', keypress_cb);

//callback
function keypress_cb(evt) {
    evt = evt || window.event;
    var code = evt.which || evt.keyCode,
        real_val = this.value + String.fromCharCode(code);
    if (code == 8) real_val = real_val.substr(0, real_val.length - 2);
}

[編集-このアプローチは、デフォルトでは、バックスペース、CTRL + Aなどのキー押下を無効にします。上記のコードは前者に対応していますが、後者と他のいくつかの不測の事態を可能にするためにさらに調整する必要があります。以下のIan Boydのコメントを参照してください。]

1
Utkanos

簡単...

KeyPressイベントハンドラーに次のように記述します。

void ValidateKeyPressHandler(object sender, KeyPressEventArgs e)
{
    var tb = sender as TextBox;
    var startPos = tb.SelectionStart;
    var selLen= tb.SelectionLength;

    var afterEditValue = tb.Text.Remove(startPos, selLen)
                .Insert(startPos, e.KeyChar.ToString()); 
    //  ... more here
}
1
Charles Bretana

イベントcharCodeを取得した値に連結してみてください。これが私のコードのサンプルです：

<input type="text" name="price" onkeypress="return (cnum(event,this))" maxlength="10">
<p id="demo"></p>

js：

function cnum(event, str) {
    var a = event.charCode;
    var ab = str.value + String.fromCharCode(a);
    document.getElementById('demo').innerHTML = ab;
}

abの値は、入力フィールドの最新の値を取得します。

0
Rama Krishna