divspanなどをキーボードイベントに応答させる方法操作ガイド

divspanなどをキーボードイベントに応答させる方法操作ガイド_JavaScriptスキル

WBOY

リリース： 2016-05-16 17:48:15

オリジナル

1187 人が閲覧しました

最近仕事で問題が発生したので、グーグルで解決策を見つけましたが、より多くの人が理解できるように単純に翻訳しました
翻訳は次のとおりです 。 🎜>DIV 内に編集可能な div と編集可能なスパンがあります。
テスト JS コードは次のとおりです。

コードをコピーしますコードは次のとおりです:

$(function() 
{ 
$('#someid'). keypress(function(イベント){alert('test');}); 
}); 

テスト HTML コード :

コードをコピーしますコードは次のとおりです。

 editable は次のとおりです:Some TEXT 

 ブラウザでテストすると、 Some TEXT でキーを押しても、「テスト」ポップアップ ボックスが表示されないことがわかります。この問題の原因は、イベントがスパンの親ノード div から送信されるため、スパンがトリガーしないためであることがわかります。もちろん、Span にフォーカスがないことも原因なので、誰かに解決策を教えてもらいたいです。

最後に、何人かの親切な人々がこの問題の解決を手伝ってくれました
私はあなたの問題に対する解決策のコードを http://jsfiddle.net/gaby/TwgkC/3/ に提出しました、そしてそれはうまくいきました
FF 、 Opera 、Chrome、Safari、IE8..
でテスト済み #someid はキー押下をトリガーするためにフォーカスを取得する必要があります。要素の作成後にコードでフォーカスを取得したい場合は、.focus() メソッド

を使用します。

コードをコピーコードは次のとおりです:

function AppendSpan()

{ 
$('# mydiv') .append('Some TExt'); 
//挿入されたスパンでキー押下イベントを処理したいとします 
$( '#someid').keypress(function(event){ 
//ここで何かをします 
alert(this.id); 
}).focus();// にフォーカスを移動します
} 

 
Append: 

イベントをトリガーする 2 つのメソッド (実際には contenteditable 属性を使用する必要があります)、受け入れられるかどうかはわかりませんこの状況
1. 編集可能なスパンを別の外側レイヤーでラップし、その属性 contenteditable="false" を設定します
demo js:

コードをコピーコードは次のとおりです。

function AppendSpan()

{ 
$('#mydiv').append(' Some TExt'); 
//挿入されたスパンでキー押下イベントを処理したいとします 
$ ('#someid').keypress(function(event){alert('test');}); 
} 
$(function() 
{ 
$('# mydiv') .keypress(function(event){AppendSpan();}) 
}); 

 
デモ HTML: 

コードをコピーしますコードは次のとおりです:

以下は編集可能です:

 
2. Span 
demo js: 

のキーボードイベントをトリガーする必要がある場合は、#mydiv を編集不可能な状態にします。

コードをコピーします

コードは次のとおりです: function AppendSpan() {

$('# mydiv').removeAttr('contenteditable') .append('Some TExt');

//次にキー押下を処理したい挿入されたスパンのイベント 
$( '#someid').keypress(function(event){alert('test');}); 
} 
$(function() 
{ 
$('#mydiv').keypress(function(event){AppendSpan();}) 
}); 

 
 デモ HTML: 

コードをコピーします

コードは次のとおりです:

> 編集可能は次のとおりです: