98

ユーザーがテキストボックスに入力すると、テキストボックスにテキストを取得しようとしています( 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>

コードはエラーなしで実行されますが、ボックスの値が duringで常に変更前の値であることを除きます。input textonKeyPress

ここに画像の説明を入力

質問: 実行中にテキスト ボックスのテキストを取得するにはどうすればよい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ユーザーがキーを離したときにのみイベントが発生します。

お持ち帰り

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

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

ボーナスリーディング

4

12 に答える 12

55

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

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

これにより、最新の文字列値が (キーアップ後に) 取得され、ユーザーがキーを押したままにすると更新されます。

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

于 2012-07-06T16:04:17.507 に答える
19

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

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

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

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

$('#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/

編集: 一部のブラウザー (Chrome など) は、バックスペースのキープレス イベントをトリガーしません。コードで keypress を keyup に変更しました。

于 2012-07-06T16:03:40.663 に答える
3 
<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>
于 2014-09-27T12:04:35.950 に答える
1

簡単...

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
}
于 2013-05-02T16:33:02.220 に答える
1

そのため、各イベントには長所と短所があります。イベント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)" />

すべての世界で最高のものを扱うようです。

于 2015-09-11T18:28:42.817 に答える
1

通常、フィールドの値 (つまり、更新前) とキー イベントに関連付けられたキーを連結します。以下は最近の 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 のコメントを参照してください。]

于 2012-07-06T16:05:10.960 に答える
1

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()" />

于 2017-05-03T08:12:44.357 に答える
0

イベント 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は、入力フィールドの最新の値を取得します。

于 2016-07-13T07:29:30.003 に答える