8

編集可能なデータ セルのマトリックスを使用して、多かれ少なかれスプレッドシートのように動作する HTML コントロールで作業します。SELECT から派生したセルに関しては、そのタイプのセルが編集のために選択されたときに正しい動作を取得するのに問題があります。

デフォルトのフォーマット (サイズ = 0) を使用して Select をレンダリングすると、ユーザーは Select の Enter キー処理の場違いな動作を取得します。

  • 最初の Enter => セルの編集を有効にします (選択コントロールを表示します)
  • 2 回目の Enter => Select を展開してオプションを表示します
  • ユーザーはup/dnキーを使用して選択します
  • 3 回目の Enter => リストを閉じます。(問題: この Enter は「keydown」イベント ハンドラーから隠されています)
  • 4 番目の入力 => セル編集を非アクティブ化するためのイベント リスナーをトリガーするために必要です。

一方、選択がリストボックスとしてレンダリングされる場合 (たとえば、サイズ = 3)、Enter キーの動作はまさに私が探しているものです (つまり、上記のリストの #2 と #3 はもはやありません)。必須)、しかし、リストが (ポップアップとしてではなく) コントロールに内部的に表示されるようになったため、セル/行のサイズが大きくなります。

では、上記の 3 番目の Enter キー イベントに「フック」する方法、または Enter キーの処理に関して Select の動作を変更する他の比較的簡単な方法はありますか?

注：サードパーティのライブラリは使用していません（jQueryなどを読んでください）

編集：これがイベントリスナーです（典型的な「addEventListener（...）」を介して添付されます）

this.e_sKeyDown = function(control, event) {
  switch(event.keyCode) {
    case 13:  // enter
      control.blur()
      break
    case 27:  // esc = reset selection to it previous value
      control.setAttribute("data-cancelModify", "true")
      control.blur()
      break
  }
}

2番目の編集：コメント/提案ごとに、私はこれを試してみました：

this.e_sOnChange = function(control, event) {
  control.blur()
}

そのイベントは発生しますが、異なるオプションごとに発生します。言い換えれば、それがユーザーが実際に選択しようとしていたオプションなのか、それとも途中で通過したオプションなのかを判断する方法はないようです。実証するために、jquery のサイトの例を次に示します。Enterキーに関係なく、テキストが上下にどのように変化するかに注意してください。

http://api.jquery.com/change/

解決済み: すべてのコメント投稿者の提案に感謝します。実際、(とにかく私の状況では) 解決策は、"keyup" イベント リスナーをミックスに追加することでした。これがどのブラウザで動作するかはわかりませんが、Chrome の新しいバージョンでは機能します。

4

1 に答える 1

2

提案によると、「隠された」Enter キー イベントを取得する方法は、「keyup」イベント リスナーを追加することです。質問は解決策を反映するように編集されました。

注:この回答は、質問を閉じるためにのみ投稿されました。当然のことながらクレジットを与えてください-jesus.teshと残りのコメント投稿者の提案...

于 2013-08-12T13:53:02.360 に答える