5

私はこれをhtmlファイルに持っています：

<textarea id="inputbox" placeholder="type here"></textarea>

テキストエリアのコンテンツが変更されるたびにすぐに起動するハンドラーを接続する正しい方法は何ですか? (キーボード、マウス/クリップボード、音声入力、脳波リーダーなど)

私は試した：

  query("#inputbox").on.change.add(handler)

ただし (少なくとも Dartium では) フィールドからタブで移動した後にのみ発火します。

目的は、入力中に Stackoverflow が Markdown 出力をレンダリングする方法と同様に、「ライブ プレビュー」ウィンドウを更新することです。

4

2 に答える 2

9

これは私がこれまでに思いついた最高のものです。よりコンパクトな、またはより好ましい代替案を誰かが知っているかどうかを聞いてうれしいです。

編集:イベント登録の新しいパターンに更新されたコード スニペット。

import 'dart:html';

void main() {
  query("#inputbox")
    ..onChange.listen(handler)
    ..onKeyDown.listen(handler)
    ..onKeyUp.listen(handler)
    ..onCut.listen(handler)
    ..onPaste.listen(handler);
}

void handler(Event event) {
  print((query("#inputbox") as TextAreaElement).value);
}

正確な動作は、ブラウザとオペレーティング システムによって異なります。

スキップすることもできますがkeyDown、keyDownとkeyUpの動作は OS の影響を受け、対称であることが保証されていないことに注意してください。少なくとも次のkeyUpまたはchangeイベントが発生するまで、変更を見逃す可能性があります。実際、Windows 7 で孤立した WM_KEYDOWN メッセージを Dartium と IE9 に送信する小さなアプリを作成して、これを証明しました。

keyPresskeyUpとkeyDownの代わりに使用できますが、バックスペースや削除などの特定のキーのイベントは生成されません。

cutマウスで実行されたカットまたはペーストに即座にpaste反応します。それらを使用しない場合、changeイベントは変更をキャプチャしますが、フィールドがフォーカスを失うまで、または場合によっては後で.

このinputイベントは上記のすべてのリスナーを置き換えることができ、Dartium ではうまく機能するようですが、IE9 では文字の追加のみをキャプチャし、削除はキャプチャしません。

カーソルキー、ホーム、終了、シフトなどの追加の望ましくないイベントを生成する可能性があることに注意keyUpしてください (IE9 など)。keyDownユーザーがこれらのアクションにショートカット キーを使用すると、カット/ペースト リスナーに加えて起動します。

質問は Dart に固有のものですが、上記の議論の多くは DOM をリッスンするすべてのコードに当てはまります。keyCode の値でさえ、ブラウザー間で標準化されていません(詳細)。

また、 KeyboardEventControllerクラスをチェックアウトすることも価値があるかもしれませんが、私がテストしたところ、概して、エッジ ケースの動作は上記のものと似ていました。それは設計による場合とそうでない場合があります。Dart の開発者は、ブラウザー間の不一致からユーザーを隔離するためにいくらかの努力をしていますが、それはまだ進行中の作業です。

また、 textareaについて話している間は、 textプロパティではなく、valueそのプロパティを使用することを忘れないでください。最後に、キーボード アクティビティの「バースト」に対する反応を抑制するようにしてください (たとえば、ハンドラーの内臓を一時的に延期し、その間に発生する追加のイベントをロールアップするある種のタイマーなど)。handler

関連する質問とリンク:

于 2013-01-21T06:08:18.207 に答える
2

ポリマーを使用しているかどうかは明確ではありませんが、使用している場合は、[変数名]Changed(oldvalue) の形式でポリマー要素に関数を作成することにより、@observable で注釈が付けられた変数への変更をサブスクライブできます。私はもともとここでこれを見つけました: How to subscribe to change of a observable field

于 2013-12-09T02:32:13.023 に答える