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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

342閲覧

動的に生成した要素にタグを追加する

SugiuraY

総合スコア317

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2018/05/02 13:49

構築しているサイトでtextbox.ioというテキストエリアでエディタ風にユーザーに使用してもらうようなAPIを実装しております。

構築サイト
textbox.io

細かい仕様はよみとけなかったのですが、これを実装(html中に<textarea id="mytextarea"を配置することで)することでhtmlタグの中に
iflame>document>html>body
と言った要素群を 動的に追加して擬似的なテキストエリアを構築しているように見受けました。

対応する要素は以下の部分です。

HTML

1<html> 2...省略 3<html> 4 <head> 5 <link rel="stylesheet" type="text/css" href="http://sunny.greater.jp/Scalers/6_include/63_textboxio/resources/css/content.css"> 6 </head> 7 <body contenteditable="true" spellcheck="false" class="ephox-candy-mountain ephox-candy-mountain-active ephox-platform-desktop" 8 style="height: 217.906px;" dir="ltr"><p><br></p> 9 </body> 10</html> 11...省略 12</html>

このような特殊なAPIのようで、テキストエリアにplaceholder的なテキストを設置するためにこれらの要素群が生成されてからテキストを本body要素の直下に付け加えるべく、以下のコードをcommon.js625行目に追加しました

Javascript

1>common.js 2$(function(){ 3 $(document).ready(function(){ 4 $('.ephox-candy-mountain').text('hello'); 5 }) 6})

本(エディタ風)テキストエリアに文字をユーザーが記載した際に、該当するbody直下(.ephox-candy-mountain)に要素が追加されていくことが分かったため、(document).readyでtextを入れておけばplaceholder風の仕様にできると考えたためです。

しかしながら、実際には本(エディタ風)テキストエディタ内にテキストは挿入されません。

本APIの仕様がどうしても完璧な理解ができずに力技で対策しようと思っていたのですが
どうしても実現できないため、どなたかお力添えをお願い申し上げます。
よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

<iframe> 内の要素は同一ドメインでないと直接参照できないです。
API ドキュメントを見てみたら、focus イベントは拾えるみたいですが、
blur イベント(フォーカスが外れた時に発火)が拾えないみたいです。

javascript

1editor.events.focus.addListener(function () { 2 // do something 3 console.log('this editor has focus', editor.element()) 4});

参考: events - Textbox.io 2.x Documentation - Docs

投稿2018/05/02 15:14

yhg

総合スコア2161

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

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

SugiuraY

2018/05/03 07:04

コメントありがとうございます。イベントを拾うことができました。 いろいろ、他にできることを調べてみようと思います。 本当に助かりました!
guest

0

基本的に <iframe> の中身は同一ドメイン上でないと書き換えれません。
親ページに placeholder 要素を配置して、レイヤー状に重ねて表現するとかしかないと思います。

投稿2018/05/02 14:25

yhg

総合スコア2161

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

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

SugiuraY

2018/05/02 15:01

コメントありがとうございます。 <iflame>要素の上に通常の<text>要素を重ねてと言ったような考え方かと思いますが、iflame上のbodyにテキストが書き込まれがことを監視しなければ重ねた<text>要素を操作できないと思います。 とすれば、<iflame>要素ご指摘の方法では書き換えることはできないですが、監視することは可能ということでしょうか? 実際に以下のようなコードを書いても動作はいたしませんでした。。 $(function(){ $('.ephox-candy-mountain').on('click',function(){ console.log('foo'); }); })
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問