web-dev-qa-db-ja.com

キー入力で変更された後、HTML入力の新しい値を取得するにはどうすればよいですか？

HTML入力ボックスがあります

<input type="text" id="foo" value="bar">

'keyup'イベントのハンドラーをアタッチしましたが、イベントハンドラーの実行中に入力ボックスの現在の値を取得すると、値が取得されます。 ！

'keypress'および 'change'イベントをピックアップしてみましたが、同じ問題です。

これは簡単に解決できると確信していますが、現時点では、短いタイムアウトを使用して数ミリ秒後にコードをトリガーすることが唯一の解決策だと思います！

これらのイベント中に現在の値を取得する方法はありますか？

編集：後で同じコードをチェックしたところ、正常に機能したため、jsファイルにキャッシュの問題があったようです。私は質問を削除しますが、アイデアを投稿した親切な人々の担当者を失うかどうかはわかりません:)

javascripthtmldom
24
Paul Dixon

コードを投稿できますか？私はこれで問題を見つけていません。 Firefox 3.01/safari 3.1.2でテスト済み：

function showMe(e) {
// i am spammy!
  alert(e.value);
}
....
<input type="text" id="foo" value="bar" onkeyup="showMe(this)" />
31
Owen

この質問にmodernアプローチを与えるにはこれはうまくいきます Ctrl+v。 GlobalEventHandlers.oninput 。

var onChange = function(evt) {
  console.info(this.value);
  // or
  console.info(evt.target.value);
};
var input = document.getElementById('some-id');
input.addEventListener('input', onChange, false);
7
Jonatas Walker

入力値には、フィールドのプロパティとフィールドのhtml 属性の2種類があります。

Keyupイベントとfield.valueを使用すると、フィールドの現在の値が取得されます。 html属性（value = ""）の内容を返すfield.getAttribute（ 'value'）を使用する場合は当てはまりません。プロパティはフィールドに入力された内容を表し、入力に応じて変化しますが、属性は自動的には変更されません（field.setAttributeメソッドを使用して変更できます）。

7
pawel
<html>
    <head>
        <script>
        function callme(field) {
            alert("field:" + field.value);
        }
        </script>
    </head>
    <body>
        <form name="f1">
            <input type="text" onkeyup="callme(this);" name="text1">
        </form>
    </body>
</html>

Onkeyupを使用して、HTML入力コントロールのnew値を取得できるようです。それが役に立てば幸い。

3
Neal Swearer

あなたはこのコードを試すことができます（jQueryが必要です）：

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#foo').keyup(function(e) {
                var v = $('#foo').val();
                $('#debug').val(v);
            })
        });
    </script>
</head>
<body>
    <form>
        <input type="text" id="foo" value="bar"><br>
        <textarea id="debug"></textarea>
    </form>
</body>
</html>
1
Marko Dumic

ここ は、さまざまなイベントとブラウザサポートのレベルの表です。少なくともすべての最新ブラウザーでサポートされているイベントを選択する必要があります。

表からわかるように、keypressイベントとchangeイベントは、keyupイベントがサポートするのに対して、統一されたサポートはありません。

また、クロスブラウザ互換のメソッドを使用してイベントハンドラーをアタッチしてください...

0
domgblackwell