Divにrole=textbox要素を加えた際のselectionStartがUndefindになる問題

div要素にrole=textboxを加え、<textarea>のように編集できるようにしました。
その際に、テキストが入力されると自動でHTMLタグを加えキャレットの位置を取得し、元に居たキャレットの位置に戻したいのですが、selectionStartもselectionEndもUndefindになってしまいます。
また、 role=texboxを加えた要素に入力されるとtextareaに同じ内容をリアルタイムで反映もさせたいです。
やりたいこととしては、リアルタイムでテキストエリアにHTMLタグを適用したものを表示したいです。ただ、それはユーザーからのHTML入力は受け付けず、JavaScriptで処理してHTMLに変換するようなものです。

コード

html
1<html>
2<htad>
3<script type="text/javascript" src="/asetts/jquery-1.11.3.min.js"></script>
4<script type="text/javascript">
5var richTextFocus = false;
6var PrevText = "";
7var Timer = null;
8$(function(){
9	$("#ritchTextArea").focus(function(event) {
10		richTextFocus = true;
11		Timer = setInterval(function(){ritchTextEdit()},10);
12	}).blur(function(event) {
13		richTextFocus = false;
14		clearInterval(Timer);
15	});
16
17	function ritchTextEdit(){
18		if(richTextFocus){
19			var NewText = $("#ritchTextArea").text();
20			if(PrevText != NewText){
21				var CurStart = $("#ritchTextArea").selectionStart;  //return undefind
22				var CurEnd = $("#ritchTextArea").selectionEnd;  //return undefind
23				
24				$("#ritchTextArea").html("<strong>" + NewText + "</strong>");
25				PrevText = NewText;
26
27				$("#ritchTextArea").selectionStart = CurStart;
28			}
29		}
30	}
31
32});
33
34</script>
35</head>
36<body>
37<textarea id="ritchTexAreaShadow">
38<div id="ritchTextArea" style="height:200px; background:#eee" role="textbox" aria-multiline="true" contenteditable="true"></div>
39</body>
40</html>

行動規範の内容に同意します

回答1件

ベストアンサー

HTML の role 属性は要素が編集可能であることとは関係なく、同要素に指定されている contenteditable 属性によるものです。

この機能については現在でも各ブラウザーで実装状況がかなり異なっているため、想定環境で正常に動作することを確認することを強くおすすめします。特に Internet Explorer での挙動が違っているようです。
ここでは IE 9 以上と Chrome 49 で確認した結果を掲載しておきます。

まず、ここで使用されている selectionStart/selectionEnd は input または textarea でのみ使用できるメソッドであるため、別のものを使用する必要があります。選択範囲は次の API を使用して取得することができます。

lang
1// Seletion オブジェクトが得られる
2var selection = window.getSelection();
3// 文字列化
4var text = selection.toString();

これらに対して jQuery などを使用して HTML を置き換えることも可能ですが、太字にするといった操作の場合は document.execCommand を使用したほうが良いでしょう。

lang
1// 選択している範囲を太字にする
2document.execCommand("bold");

もともとは IE の独自拡張でしたが現在では多くのコマンドが使用可能です。詳細は MDN を参照してください。
document.execCommand - Web API インターフェイス | MDN

これらの編集結果は jQuery などを使用して次のように取得できます。

lang
1var html = $("#richTextArea").html();

この方法を使用すると textarea を用意することなく処理を行うことができますが、どのような HTML が出力されるかはブラウザーの実装依存です。（b や strong など）
また、Microsoft Word などでコピーした結果を貼り付けると適用されていた書式がそのまま再現されます（おそらく回避できません）

投稿2016/02/16 16:39

編集2016/02/16 16:40