31

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

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

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

「 keypress 」イベントと「change 」イベントを取得しようとしましたが、同じ問題です。

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

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

編集：後で同じコードをチェックしたので、jsファイルでキャッシュの問題が発生したようですが、問題なく動作しました。私は質問を削除しますが、それがアイデアを投稿した親切な人々の担当者を失うかどうかはわかりません:)

4

6 に答える 6

38

あなたのコードを投稿できますか？私はこれで問題を見つけていません。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)" />
于 2008-10-21T17:45:01.620 に答える
19

この質問に現代的なアプローチを与えるために。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);
于 2015-11-26T18:51:49.503 に答える
8

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

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

于 2008-10-21T18:00:56.533 に答える
3 
<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 入力コントロールの新しい値を取得できるようです。それが役に立てば幸い。

于 2008-10-21T17:47:01.740 に答える
1

このコードを試すことができます (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>
于 2008-10-21T17:51:51.857 に答える
0

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

表からわかるように、keypressとchangeイベントは均一にサポートされていませんが、keyupイベントはサポートされています。

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

于 2008-10-21T17:45:02.400 に答える