web-dev-qa-db-ja.com

JavaScript OnPaste

私は今これを持っています：

<input type="text" placeholder="Paste text" onPaste="alert(this.value);">

これは実際には機能しますが、空の警告ウィンドウが返されます。価値はありません。助けて？

javascriptinputcopy-paste
17
Jake

onpasteイベントは、inputのvalueが変更される前に発生します。 setTimeout などが必要です。

_<input type="text" placeholder="Paste text" onPaste="var e=this; setTimeout(function(){alert(e.value);}, 4);">​
_

ウィンドウオブジェクトに接続されているタイムアウト関数のスコープ内ではthisにアクセスできないため、グローバル変数内にthisへの参照を格納しています。

タイムアウトとして4ミリ秒を使用しています。これは、HTML5仕様で有効な最小間隔/タイムアウトであるためです。 編集：コメントに記載されているように、_0_ミリ秒をtimeOutとして使用して、自動的に_4_に再計算することもできます。 jsPerfテスト 。

フィドル

onpasteイベント内で関数呼び出しを使用して、パラメータとしてthisを渡し、HTMLがJSと過度に混合するのを防ぐこともできます。 :)

そして、これは読みやすく、複数の入力で使用できる関数です：

_function pasted(element) {
    setTimeout(function(){
        alert(element.value);
    }, 0); //or 4
}​
_

これは、任意の入力に対して単にonPaste="pasted(this)"で呼び出すことができます。

フィドル

44
Fabrício Matté

これは、onpasteイベントが発生するbeforeため、コンテンツが要素（ link ）に貼り付けられるため、あなたがそれを処理する時点ではまだありません。

最新のブラウザーは、イベントハンドラー内でクリップボードデータを取得する方法をサポートしています。クロスブラウザーソリューションの試行については、 JavaScriptが貼り付けイベントでクリップボードデータを取得する（クロスブラウザー） を参照してください。

また、後で入力値をチェックするイベントハンドラー関数（10ミリ秒で十分です）でタイマーを起動するだけで、常に問題を回避できます。

9
Dmitry Pashkevich