1

conteneditable divコントロールを使用していますが、ユーザーがこのコントロール内を最初にクリックしたときに、すべてのテキストを削除して、最初にキャレットを配置します。これまでのところ、私のコードはIE、Opera、Firefoxで動作していますが、Chromeでは、設定しようとしている場所にカレットが表示されないようです。私のコードは次のとおりです。

<div id="mydiv" runat="server" contenteditable="true">
   <div id="innerDiv" runat="server">
       <span onclick="javascript:DisableClick();">text I want to delete on first click</span>
   </div>
</div>

function DisableClick()
{
   document.getElementById("<%=innerDiv.ClientID %>").innerHTML = "";
   if(document.createRange)
   {
      var range = document.createRange();
      range.selectNodeContents(document.getElementById("<%=innerDiv.ClientID %>"));
      range.collapse(false);
      var selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
   }
}

テキストを削除すると、Chromeでカレットが完全に消えます。ただし、奇妙なことに、divのinnerHTMLを空の文字列に設定する代わりに、document.getElementById（ "<％= innerDiv.ClientID％>"）。innerHTML ="a";のようなテキストを指定します。カレットが表示されます。

なぜ何かアイデアはありますか？ありがとう！

4

2 に答える 2

3

内部コンテナのスタイルをDIVに設定するdisplay:inlineかdisplay:inline-block、DIVの代わりにSPANを使用します。DIV要素はデフォルトで「ブロック」として表示され、Chromeはテキストコンテンツのないコンテンツ編集可能なブロック要素に注意を表示しません。

于 2013-03-04T21:03:25.737 に答える