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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。