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

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

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

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

JavaScript

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

Q&A

2回答

3064閲覧

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

yuchuls

総合スコア10

HTML5

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

JavaScript

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

0グッド

0クリップ

投稿2016/11/04 04:42

###前提・実現したいこと
今、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;

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

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

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

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

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

Lhankor_Mhy

2016/11/04 08:26

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

回答2

0

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

総合スコア35865

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

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

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 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」というクラスが2つあり、一つはtextタイプの入力欄、もう一つはspan要素が入っています。 inputに直にリッチエディタが作用し、inputのvalue値を変更するのであればinnerHTMLでなくても出来ますし、変更したものを別のspanへ挿入し、そこから取得するのであればinputの中身は必要ありません(リッチエディタ側の仕事)。 お手数ですが、「divに中に入力した」とはどのような処理の流れなのか教えて頂きたく思います。
yuchuls

2016/11/04 06: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) これに関してはどこを見せればいいのかが分かりかねる状態です
nobinobi

2016/11/04 06:36

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問