5

contenteditable プロパティが true に設定されている div があります。子をキーボード イベントに応答させるにはどうすればよいですか? 唯一の方法は、親 div でイベントをキャプチャし、選択 API を介して子を把握することです。より良い方法はありますか？具体的には、キーボード イベント ハンドラーを子要素にアタッチできますか? 何か不足していますか？

問題を説明するサンプル コードが添付されています。コード内のコメントが十分に説明されていることを願っています。

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<BODY>
<div id="editable" contentEditable='true' style='height: 130px; width: 400px; border-style:solid; border-width:1px'>
    <span id="span1" onkeypress="alert('span1 keypress')">test text 1</span> <!-- does not work -->
    <span id="span2" > test text2</span>
    <span id="span3" onclick="alert('span3 clicked')">test text 3</span>  <!-- this works fine -->
</div>
<!-- Uncomment this to set a keypress handler for span2 programatically. still doesnt work -->
<!--
<script type="text/javascript">
    var span2 = document.getElementById('span2');
    span2.onkeypress=function() {alert('keypressed on ='+this.id)};
</script>
-->

<!-- Uncomment this to enable keyboard events for the whole div. Finding the actual child that the event is happening on requires using the selection api -->
<!--
<script type="text/javascript">
    var editable = document.getElementById('editable');
    editable.onkeypress=function() {alert('key pressed on ='+this.id+';selnode='+getSelection().anchorNode.parentNode.id+',offset='+getSelection().getRangeAt(0).startOffset)};
</script>
-->
</BODY>
</HTML>
4

1 に答える 1

3

これは、通常のスパンと div がフォーカスを受け取ることができないためです。tabindexタグに属性を追加するか、編集可能にすることで、通常のスパンまたは div をフォーカス可能にできます。tabindexこれにより、IE での編集が妨げられるように思われるため、子スパンに は必要ありません。div 全体のハンドラーに渡されたオブジェクトのtarget/srcElementプロパティを調べることを提案するつもりでしたが、IE では、子スパンではなく同じ div への参照しか得られません。Eventkeypress

したがって、あなたの質問への回答として、選択を使用して文字が入力された場所を確認するよりも優れたクロスブラウザー ソリューションがあるとは思いません。

于 2009-08-18T15:09:15.970 に答える