2

menu li オプションをクリックすると contentEditable へのフォーカスが失われるため、execCommand を実行しようとすると、選択が存在しなくなり、選択に影響しなくなります。入力を追加せずにこれを解決するにはどうすればよいですか?

更新: ** jsFiddle **

HTML

<div contenteditable=true>
    paragraph1<br/>
    paragraph2<br/>
    paragraph3
</div>
<div contenteditable=true>
    paragraph4<br/>
    paragraph5<br/>
    paragraph6
</div>
<input type=button id=show value=ToggleMenu>
<ul id=submenu>
    <li>p</li>
    <li>h1</li>
    <li>h2</li>
</ul>

Javascript

$("#show").on("click",function(){
    $("#submenu").toggle();
});
$("#submenu").on("click","li",function(){  //when this is clicked, editable div loses focus.
    document.execCommand("formatBlock", false, $(this).text());
    console.log($(this).text(), "was clicked");
});
4

2 に答える 2

0

コードの問題の 1 つは、HTML に準拠していないことです。たとえば、サブメニューは

<ul id = 'submenu'>
  <li>p</li>
  <li>h1</li>
  <li>h2</li>
</ul>

liクリックイベントのセレクターとして使用する代わりに、試してください

$("#submenu").on("click", "li", function(){
   document.execCommand("formatBlock", false, $(this).text());
   alert($(this).text());
});

これにより、クリック イベントで警告ボックスがスローされるため、クリックが登録されていることがわかります。

フィドル

于 2013-11-08T22:41:08.700 に答える