web-dev-qa-db-ja.com

contenteditable = trueブロック内のcontenteditable = falseはIE8でも編集可能です

次のHTMLは、内部のspanが編集可能でないことを確認するためのものです。これは他のブラウザでは機能しますが、IE8では機能しません。

<div contenteditable="true">
  Luke, I am your father.
  <span contenteditable="false">I'm your son?! Ewww!</span>
  Don't speak back to me!
</div>

ポイントを説明するJSFiddleは次のとおりです（IE8を使用してテストします） http://jsfiddle.net/haxhia/uUKPA/3/ 。

IE8がこれも適切に処理することを確認するにはどうすればよいですか？

htmlinternet-explorer-8contenteditable
31
Gezim

さて、私はすでに ペニシリンが発見された のような方法で答えをすでに発見しました。

このコードをいじってみると、contenteditableとvoilaのtrueをspanに誤って設定してしまいました。出来た！

したがって、contenteditable div内でspan NON-contenteditableを作成するには、そのcontenteditable属性をtrueに設定するだけです。

<div contenteditable="true">
  Luke, I am your father.
  <span contenteditable="true">I'm your son?! Ewww!</span>
  Don't speak back to me!
</div>

デモするファイルは次のとおりです（IE8を使用して開きます） https://codepen.io/hgezim/pen/qMppLg 。

最後に、私は投票するために質問を投稿しませんでした（ただし、彼らは傷つかないでしょう！）。

35
Gezim

IE=）のcontenteditable = "true"内のcontenteditable = "true"（編集不可にする）の問題は、内部要素をダブルクリックすると編集可能になることです

解決

Grandparent tag as contenteditable true

Parent tag as contenteditable false

Child tag as contenteditable false

子タグの内容は確実に編集できなくなります

    <ul contenteditable="true">
        <li>By default, this content is editable via its 
        inherited parent elements value.</li>

    <li contenteditable="false" ><span contenteditable="false">This content is     
    <b>not</b> 
    editable for sure</span></li>
    </ul>

JSFiddleの例

18
Alexvx

今日も同じ問題に悩まされ、しばらく試した後、IEでうまくいく解決策を見つけました。子のcontenteditable要素にクリックイベントリスナーを追加します。イベントハンドラで以下のようにします

 document.querySelector('.simulated-icon').addEventListener('click', function(evt){
    evt.stopPropogation;
    evt.preventDefault;
    return false;
 });
 
 
<div class="simulated-icon"><span>Icon text</span></div>

ご覧のとおり、子コンテンツの編集可能なイベントのクリックイベントリスナーでfalseを返すと、編集を許可しないようにIEに指示します。これは、親ノードにクリックイベントがあり、ターゲットの子ノードがイベントリスナーでクリックされます。

1
Chetan Chandrashekar