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

Question 1

ユーザーが入力したテキストボックス（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>

スニペットを展開

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

ここに画像の説明を入力してください

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

ボーナスチャター

HTMLDOMには「ユーザーが入力しています」に関連する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イベントは、ユーザーがキーを離したときにのみ発生します。

テイクアウト

私がすることができますへの対応onKeyDownやonKeyPress、しかし前に両方のはまだ提起されているinput.value更新されました
onKeyUpテキストボックス内のテキストが変更されても応答しないため、応答できません。

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

ボーナスリーディング

Question 2

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>

スニペットを展開

Question 3

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

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

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

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

Question 4

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に変更しました。

Question 5

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

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

それがあなたが望むすべてであり、それはより速いです！

Question 6

<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>

Question 7

これまでのところ、完全な解決策を提供する答えはありません。対処すべき問題がかなりあります。

全てのキー入力が上に渡されているわけではないkeydownとkeypress（たとえば、バックスペースと削除キーは、一部のブラウザによって抑制されている）ハンドラ。
取り扱いkeydownは良い考えではありません。キーを押してもキーが押されない場合があります。
setTimeout() スタイルソリューションは、ユーザーが入力を停止するまで、Google Chrome / BlinkWebブラウザーで遅延します。
マウスとタッチのイベントを使用して、切り取り、コピー、貼り付けなどのアクションを実行できます。これらのイベントはキーボードイベントをトリガーしません。
ブラウザは、入力方法によっては、ユーザーがフィールドから離れるまで要素が変更されたという通知を配信しない場合があります。

より正確なソリューションを処理します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つのイベントすべてを処理すると、すべてのエッジケースがキャッチされます。ユーザーからの入力を処理するときは、すべてのタイプの入力方法を検討し、クロスブラウザーおよびクロスデバイスの機能を検証する必要があります。上記のコードは、デスクトップ上のFirefox、Edge、Chrome、および私が所有するモバイルデバイスでテストされています。

Question 8

私は通常、フィールドの値を（つまり、更新される前に）キーイベントに関連付けられたキーと連結します。以下は最近の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などのキー押下を無効にします。上記のコードは前者に対応していますが、後者とその他のいくつかの不測の事態に対応するために、さらに調整する必要があります。以下のイアン・ボイドのコメントを参照してください。]

Question 9

簡単...

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
}

Question 10

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

すべての世界で最高のものを処理しているようです。

Question 11

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

スニペットを展開

Question 12

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

Question 13

これを行うためのより良い方法があります。concatメソッドを使用します。例

グローバル変数を宣言します。これはAngular10でうまく機能し、VanillaJavaScriptに渡すだけです。例：

HTML

<input id="edValue" type="text" onKeyPress="edValueKeyPress($event)"><br>
<span id="lblValue">The text box contains: </span>

コード

emptyString = ''

edValueKeyPress ($event){
   this.emptyString = this.emptyString.concat($event.key);
   console.log(this.emptyString);
}