jsのリアルタイムの情報取得で詰まってます

###前提・実現したいこと
今、iframeのdesignModeを用いずにリッチエディタを作っています。

入力した文字に対して範囲選択して、ボタンを押すと色や太字にするところまではこぎつけたのですが、その文字を（今入力した文字）を取得して、そのボックスの下にあるテキストエリア内に出力しようとしていますがなかなかうまくいきません。

リッチエディタ自体は<div>で作っていて、その中の値をinnerHTMLで引き出すところまでは挑戦しましたが、どうも何も吐き出されず（あらかじめhtmlでdiv内に文字を入れとくと反映する。）

やりたいこととしては、今入力したもののデータも全て取得、出力できるようになることです。

リアルタイムにデータを監視するような？方法がどうもわからず質問させていただきました。
現段階だと、文字入力前のデータを取得して止まってしまっています。
”なにかのぼたんを押したとき”にその中身を取得するような感じでも大丈夫です。

できればピュアなjsで書きたいと思っています。

よろしくお願いします。

###該当のソースコード
html,css,javascript,jquery

###試したこと
何をしてもお手上げでした。
jsは初心者です、エラーは出ておりません。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
myClickeeを押すと、edit_areaに入力したものがsampleに吐き出されると最高です。
//html

<input id="url" type="text" value="http://">
<input type="button" onclick="miceditor.link();" value="リンク">|
<button type="button" onclick="miceditor.span('red');"><span class="red">紅</span></button>|
<button type="button" onclick="miceditor.span('blue');"><span class="blue">蒼</span></button>|
<button type="button" onclick="miceditor.span('green');"><span class="green">翠</span></button>|
<button type="button" onclick="miceditor.span('yellow');"><span class="green">黄</span></button>|
<button type="button" onclick="miceditor.span('new');"><span class="new">NEW</span></button>
<div id="edit_area" class="edit_area"><input type="text" id="cursor" class="cursor"></div>
<div class="edit_area" style="visibility:hidden;"><span id="getCursorBoxWidth"></span></div>
<div id = "myClickee">ここをクリック！</div>
<textarea id="sample"></textarea>
<p id="log"></p>

//script
var nakami = document.getElementById('edit_area');
var sample = document.getElementById('sample');
var nakamiInner = nakami.innerHTML;
var sampleInner = sample.value;
console.log(nakamiInner);
console.log(sampleInner);
console.log(sample);
// クリックのイベントハンドラを定義
function myClicked( e ) {
// 引数 e には色々なものが入っているが今回は使わない

sample.value = nakamiInner;
}

// onclick イベントのイベントハンドラを設定
document.getElementById( "myClickee" ).onclick = myClicked;

Lhankor_Mhy

2016/11/04 08:26

なんか普通に当方ではできてしまったんですが、コンソールにエラーメッセージなどは出ていますか？

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

回答2件

javascript
1var nakami = document.getElementById('edit_area');
2
3var nakamiInner = nakami.innerHTML;

ご提示のコードですと、たぶん、スクリプトがパースされた段階で上記が実行され、nakamiInnerは更新されないと思いますので、

javascript
1// クリックのイベントハンドラを定義
2function myClicked( e ) {
3// 引数 e には色々なものが入っているが今回は使わない
4
5sample.value = nakamiInner;
6}

↑この部分でのsample.valueに代入される値は変わらないと思います。
nakami.innerHTMLの取得をクリックイベントハンドラの中でやれば解決するかと。

投稿2016/11/04 08:54

Lhankor_Mhy

総合スコア37634

ご希望の動きが理解できていない可能性が高いですが、下記内容のような感じでしょうか。

<html>
<head>
</head>
<body>
<script type="text/javascript">
	function myClicked() {
		var edit_value = document.getElementsByClassName('edit_area');
		var textarea_str = edit_value[1];
		document.example_form.example_textarea.value = textarea_str.innerHTML;
	}
</script>

<form name="example_form">
<div id="edit_area" class="edit_area"><input type="text" id="cursor" class="cursor"></div> 
<div class="edit_area" style="visibility:hidden;"><span style="font-size:20px;color:#00FF00;">hoge</span></div> 
<div id = "myClickee" onclick="myClicked();">ここをクリック！</div> 
<textarea id="sample" name="example_textarea"></textarea> 
<p id="log"></p>
</form>

</body>
</html>

すみません、リッチエディタの仕様が不明ですので、その記述は削除させて頂きました。
故に、取得部分は変更する必要があるかと思います。

上記では単純にdivの中身を取得してtextareaの中に挿入するだけです。

作成されたリッチエディタの情報を載せると他の回答が得られると思いますよ。

コード追加

<html>
<head>
</head>
<body>
<script type="text/javascript">
    function myClicked() {
        var edit_value = document.getElementById('cursor').value;
        //var edit_value = document.getElementsByClassName('edit_area');
        var textarea_str = edit_value;
        //var textarea_str = edit_value[0];
        document.example_form.example_textarea.value = textarea_str;
        //document.example_form.example_textarea.value = textarea_str.innerHTML;
    }
</script>

<form name="example_form">
<div id="edit_area" class="edit_area"><input type="text" id="cursor" class="cursor"></div> 
<div class="edit_area" style="visibility:hidden;"><span style="font-size:20px;color:#00FF00;">hoge</span></div> 
<div id = "myClickee" onclick="myClicked();">ここをクリック！</div> 
<textarea id="sample" name="example_textarea"></textarea> 
<p id="log"></p>
</form>

</body>
</html>

投稿2016/11/04 05:29

編集2016/11/04 06:39

nobinobi

総合スコア199

yuchuls

2016/11/04 05:45

回答ありがとうございます！これだとdivに中に入力した文字がテキストエリアに出力されず（これはすでに試しました）、せめてもなのですが、入力した値がテキストエリアに出力される状態ができると理想なのですが・・・・。

nobinobi

2016/11/04 06:04 編集

既にお試し頂いていたのですね、失礼しました。すみません、ではリッチエディタについての情報の整理をさせて頂きたいのですが、下記内容を教えて頂けますでしょうか。・リッチエディタがDOM操作を行うのはどの要素なのか。・リッチエディタによる操作が行われたHTMLソース（DOM）記載頂いたソースには「edit_area」というクラスが２つあり、一つはtextタイプの入力欄、もう一つはspan要素が入っています。 inputに直にリッチエディタが作用し、inputのvalue値を変更するのであればinnerHTMLでなくても出来ますし、変更したものを別のspanへ挿入し、そこから取得するのであればinputの中身は必要ありません（リッチエディタ側の仕事）。お手数ですが、「divに中に入力した」とはどのような処理の流れなのか教えて頂きたく思います。

yuchuls

2016/11/04 06:30

<div id="edit_area" class="edit_area">ここ１<input type="text" id="cursor" class="cursor"></div> に入力した内容が<textarea id="sample">ここ２</textarea>に出れば解決なのですが、現状ここ１にテキストを入力して<div id = "myClickee">ここをクリック！</div>をおしても、入力前の状態の中身が出るのみになります。まだ精査前のデータなので自分でもまだ仕様をかんぜんに把握はしておらず、コードもとても長いのでとりあえず抜粋させていただいたのが今の状況なので、・リッチエディタがDOM操作を行うのはどの要素なのか。・リッチエディタによる操作が行われたHTMLソース（DOM）これに関してはどこを見せればいいのかが分かりかねる状態です

nobinobi

2016/11/04 06:36

ありがとうございます。自作かと思っていましたが、リッチエディタはどこかのツールを利用している感じでしょうか？であればリッチエディタの名前を教えて頂きたく思います。とりあえず、inputの中身を出すというコードを追加しておきます。恐らく、これも試されたとは思いますので、そうでしたら無視して下さい。

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

あなたの回答