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

最近仕事で問題が発生したので、グーグルで解決策を見つけましたが、より多くの人が理解できるように単純に翻訳しました
翻訳は次のとおりです 。 🎜>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:

コードをコピーします

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

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