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

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

ただいまの
回答率

87.94%

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

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,295

score 10

前提・実現したいこと

今、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;

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2016/11/04 17:26

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

    キャンセル

回答 2

0

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

<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 14:45

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

    キャンセル

  • 2016/11/04 14:57 編集

    既にお試し頂いていたのですね、失礼しました。
    すみません、ではリッチエディタについての情報の整理をさせて頂きたいのですが、下記内容を教えて頂けますでしょうか。

    ・リッチエディタがDOM操作を行うのはどの要素なのか。
    ・リッチエディタによる操作が行われたHTMLソース(DOM)

    記載頂いたソースには「edit_area」というクラスが2つあり、一つはtextタイプの入力欄、もう一つはspan要素が入っています。
    inputに直にリッチエディタが作用し、inputのvalue値を変更するのであればinnerHTMLでなくても出来ますし、変更したものを別のspanへ挿入し、そこから取得するのであればinputの中身は必要ありません(リッチエディタ側の仕事)。

    お手数ですが、「divに中に入力した」とはどのような処理の流れなのか教えて頂きたく思います。

    キャンセル

  • 2016/11/04 15:30

    <div id="edit_area" class="edit_area">ここ1<input type="text" id="cursor" class="cursor"></div>
    に入力した内容が<textarea id="sample">ここ2</textarea>に出れば解決なのですが、現状ここ1にテキストを入力して<div id = "myClickee">ここをクリック!</div>をおしても、入力前の状態の中身が出るのみになります。

    まだ精査前のデータなので自分でもまだ仕様をかんぜんに把握はしておらず、コードもとても長いのでとりあえず抜粋させていただいたのが今の状況なので、

    ・リッチエディタがDOM操作を行うのはどの要素なのか。
    ・リッチエディタによる操作が行われたHTMLソース(DOM)

    これに関してはどこを見せればいいのかが分かりかねる状態です

    キャンセル

  • 2016/11/04 15:36

    ありがとうございます。
    自作かと思っていましたが、リッチエディタはどこかのツールを利用している感じでしょうか?
    であればリッチエディタの名前を教えて頂きたく思います。

    とりあえず、inputの中身を出すというコードを追加しておきます。
    恐らく、これも試されたとは思いますので、そうでしたら無視して下さい。

    キャンセル

0

var nakami = document.getElementById('edit_area');

var nakamiInner = nakami.innerHTML;


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

// クリックのイベントハンドラを定義
function myClicked( e ) {
// 引数 e には色々なものが入っているが今回は使わない

sample.value = nakamiInner;
}


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.94%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る