web-dev-qa-db-ja.com

入力タイプ= "テキスト"で入力時の変化を追跡するための最良の方法は？

私の経験では、input type="text"onchangeイベントは通常あなたがコントロールを離れた（blur）後にのみ発生します。

onchangeの内容が変わるたびにブラウザにtextfieldをトリガーさせる方法はありますか？そうでない場合、これを「手動で」追跡するための最もエレガントな方法は何ですか？

フィールドを右クリックして[貼り付け]を選択すると、onkey*イベントの使用は信頼できません。これにより、キーボード入力なしでフィールドが変更されます。

setTimeoutは唯一の方法ですか？..醜い:-)

javascripthtmlhtml-form
374
Ilya Birman

更新：

もう一つの答え （2015）をご覧ください。

元の2009年の答え：

それで、onchangeイベントをキーダウン、ブラー、and貼り付けで起動しますか？それは魔法です。

入力したとおりに変更を追跡したい場合は、"onkeydown"を使用します。マウスで貼り付け操作をトラップする必要がある場合は、"onpaste"（ _ ie _ 、 FF3 ）および"oninput"（ FF、Opera、Chrome、Safari1）.

1Safariで<textarea>が壊れました。代わりに textInput を使用してください。

242
Crescent Fresh

最近は oninput をリッスンしています。 要素にフォーカスを失う必要なしに onchange のように感じます。 HTML5です。

IE 8以下を除くすべての人（モバイルでも）でサポートされています。 IEの場合はonpropertychangeを追加します。私はこれをこんな風に使っています：

const $source = document.querySelector('#source');
const $result = document.querySelector('#result');

const typeHandler = function(e) {
  $result.innerHTML = e.target.value;
}

$source.addEventListener('input', typeHandler) // register for oninput
$source.addEventListener('propertychange', typeHandler) // for IE8
// $source.addEventListener('change', typeHandler) // fallback for Firefox for <select><option>, for <input> oninput is enough
<input id="source" />
<div id="result"></div>
536
Robert Siemer

以下のコードはJquery 1.8.3で私のためにうまく働きます

HTML：<input type="text" id="myId" />

Javascript/JQuery：

$("#myId").on('change keydown paste input', function(){
      doSomething();
});
37
Amrit Pal Singh

Javascriptはここでは予測不可能で面白いです。

  • テキストボックスをぼかしたときにのみonchangeが表示されます
  • onkeyupとonkeypressは常にテキストの変更時に発生するわけではありません
  • テキストの変更時にonkeydownが発生します（ただし、マウスクリックでカット＆ペーストを追跡することはできません）。
  • onpaste＆oncutは、キーを押したとき、さらにマウスを右クリックしたときにも発生します。

そのため、テキストボックスの変更を追跡するには、onkeydown、oncut、およびonpasteが必要です。これらのイベントのコールバックでは、テキストボックスの値を確認しても、コールバック後に値が変更されるため、更新された値は取得されません。したがって、これに対する解決策は、変更を追跡するためにタイムアウト機能を50ミリ秒（またはそれ以下）のタイムアウトに設定することです。

これは汚いハックですが、私が調べたように、これが唯一の方法です。

これが一例です。 http://jsfiddle.net/2BfGC/12/

37
Sanket Sahu

onkeyupは、入力した後に発生します。たとえば、指を離すときにtを押すとアクションが実行されますが、keydownでは、文字tを入力する前にアクションが実行されます

これが誰かに役立つことを願っています。

そのため、onkeyupは、今入力した内容を送信するときに適しています。

10
Fernando André

Internet Explorerのみを使用している場合は、これを使用できます。

<input type="text" id="myID" onpropertychange="TextChange(this)" />

<script type="text/javascript">
    function TextChange(tBox) {
        if(event.propertyName=='value') {
            //your code here
        }
    }
</script>

それが役立つことを願っています。

8
RolandDeschain

私は同様の要件を持っていました（Twitterスタイルのテキストフィールド）。 onkeyupとonchangeを使用しました。 onchangeは実際にはフィールドからフォーカスを失ったときのマウスペースト操作を引き受けます。

[更新] HTML5以降では、上記の他の回答で説明したように、oninputを使用してリアルタイムで文字変更を更新します。

8
Mohnish

2018年にはinputイベントを使うのが良いと思います。

-

WHATWG仕様に記載されているように（ https://html.spec.whatwg.org/multipage/indices.html#event-input-input ）：

ユーザーが値を変更したときにコントロールで発生します（ changeイベント も参照）。

-

使い方の例を示します。

<input type="text" oninput="handleValueChange()">
4
Patrick Hillert

「入力」は私のために働きました。

var searchBar  = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);
4
Sam

（すべての貼り付け方法を修正しないでください）非常に近い解決策がありますが、それらのほとんど：

テキスト領域と同様に入力に対しても機能します。

<input type="text" ... >
<textarea ... >...</textarea>

このようにしてください：

<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea>

私が言ったように、貼り付けるすべての方法がすべてのブラウザでイベントを発生させるわけではありません。

しかし、ほとんどの貼り付け方法はキーボードやマウスを使って行われるので、通常、onkeyupまたはonmouseupは貼り付け後に起動され、onkeyupはキーボードで入力するときに起動されます。

チェックコードに時間がかからないようにしてください。そうしないと、ユーザーの印象が悪くなります。

はい、トリックはキーとマウスで発射することです...しかし両方とも発射することができるので注意してください。

4
z666zz666z

JQueryを使って次のアプローチを判断してください。

HTML：

<input type="text" id="inputId" />

Javascript（JQuery）：

$("#inputId").keyup(function(){
        $("#inputId").blur();
        $("#inputId").focus();
});

$("#inputId").change(function(){
        //do whatever you need to do on actual change of the value of the input field
});
4
Alex Uke

それぞれを追跡するには、この例を試してみてください。その前に、カーソルの点滅速度をゼロに減らしてください。

<body>
//try onkeydown,onkeyup,onkeypress
<input type="text" onkeypress="myFunction(this.value)">
<span> </span>
<script>
function myFunction(val) {
//alert(val);
var mySpan = document.getElementsByTagName("span")[0].innerHTML;
mySpan += val+"<br>";
document.getElementsByTagName("span")[0].innerHTML = mySpan;
}
</script>

</body>

onblur：イベントは終了時に生成されます

onchange：inputtextに変更があった場合、終了時にイベントが生成されます

onkeydown：どのキーを押してもイベントが発生します（キーを長押しした場合も同様）

onkeyup：イベントは任意のキーリリースで生成されます

onkeypress：onkeydown（またはonkeyup）と同じですが、Ctrl、Backsace、その他には反応しません。

3
Venkat

keydown、keyup、およびkeypressイベントも使用できます。

3
Gumbo

2018ここで、これは私がすることです：

$(inputs).on('change keydown paste input propertychange click keyup blur',handler);

あなたがこのアプローチの欠陥を指摘できれば私は感謝するでしょう。

1
a20

IE8では、Robert Siemer addEventListenerはサポートされていません。

「IEの古いバージョンは、同等の独自のEventTarget.attachEvent（）メソッドをサポートしていました。」 https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener

0
bpolelli