質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3396閲覧

IEでcontenteditableの色変更が、特定条件で行われない

h_daido

総合スコア824

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2018/02/01 06:10

いつもお世話になっております。

contenteditableを利用したリッチテキストエディタを実装しています。
その中で、IEのみかつ特定条件でexecCommandの色変更(およびサイズ変更もなのですが...)がワークしないケースがあります。

有識者の方で対応方法をご存知の方がいらっしゃれば教えていただけないでしょうか?

条件

  • ブラウザはwin x IE11でのみ観測できました
  • カーソルモードの場合(範囲選択でない場合)
  • 入力モードが全角入力の場合

上記のケースでのみ文字色の変更がワークしません。

サンプル

以下にサンプルのpenを作成しておきました。ご確認いただけると幸いです。
https://codepen.io/anon/pen/KQpOeP

中身は以下になります

html

1<html lang="ja"> 2 <head></head> 3 <body> 4 <div class="editor" contenteditable="true"></div> 5 <div class="toolBox"> 6 <button type="button" onmousedown="changeColor('red')">red</button> 7 <button type="button" onmousedown="changeColor('green');">green</button> 8 <button type="button" onmousedown="changeColor('blue');">blue</button> 9 </div> 10 </body> 11</html>

css

1.editor{ 2 width: 500px; 3 height: 100px; 4 background-color: #efefef; 5 border: 1px solid #ddd; 6 padding: 10px; 7 float: left; 8} 9.toolBox{ 10 float: left; 11 padding: 10px; 12}

javascript

1function changeColor(color){ 2 document.execCommand('foreColor', false, color) 3 var event = (window.event)? window.event : arguments.callee.caller.arguments[0]; 4 event.preventDefault(); 5 event.stopPropagation(); 6}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

どうやらexecCommandでは難しそうなので、IEを判定した上で、execCommandにあたる処理をselectionとrangeで行うのはいかがでしょうか。

https://codepen.io/anon/pen/YeyYPN

javascript

1var ie = 0 <= navigator.userAgent.toLowerCase().indexOf('trident'); 2 3function changeColor(color){ 4 var event = window.event ? window.event : arguments.callee.caller.arguments[0]; 5 event.preventDefault(); 6 event.stopPropagation(); 7 if (ie) { 8 changeColorExecIE(color); 9 } else { 10 changeColorExec(color); 11 } 12} 13 14function changeColorExec(color) { 15 document.execCommand('foreColor', false, color); 16} 17 18function changeColorExecIE(color) { 19 var selection = document.getSelection(); 20 var range = selection.getRangeAt(0); 21 if (getElementNode(range.commonAncestorContainer).getAttribute('color') === color) { 22 return; 23 } 24 var newNode = document.createElement('font'); 25 newNode.setAttribute('color', color); 26 range.surroundContents(newNode); 27 range.selectNodeContents(newNode); 28 selection.removeAllRanges(); 29 selection.addRange(range); 30} 31 32function getElementNode(node) { 33 return node.nodeType === Node.ELEMENT_NODE ? node : node.parentNode; 34}

投稿2018/02/01 17:12

編集2018/02/02 01:45
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

h_daido

2018/02/02 01:36

すごい!ご丁寧にありがとうございます!大変参考になります! 現実装に入れ込んで、もう少し調べてみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問