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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

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

Markdown

Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

Q&A

0回答

330閲覧

クリックイベントが邪魔されてしまうのを回避したい

nanashi-_.eng05

総合スコア35

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

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

Markdown

Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

0グッド

0クリップ

投稿2022/02/23 02:03

編集2022/02/26 11:39

使用しているもの・環境

laravel 8 markdown.js jQuery

実装したいこと

1.ブラウザ上にテキストを表示(divタグで表示)
2.1をクリックすると、textareaが表示され、テキストの編集ができる(1で書かれていたテキストがそのままtextareaに表示される。divタグがtextareaタグに置き換わったイメージ)
3.textarea上部にマークダウンを付与できるボタン(太字・斜体・下線・右寄せなど)を表示し、任意のボタンを押すとマークダウンベースのテキストがtextareaに反映される。(markdown.jsで実装)

textareaに反映されるマークダウンテキスト↓ 太字→## ここにテキストを入れてください 斜体→_ここにテキストを入れてください_ 下線→<u>ここにテキストを入れてください</u> リンク→[ここにテキストを入れてください](URLを入れてください)

4.textarea以外の部分をクリックすると、1の状態に戻る(foucusoutで実装)

ソースコード

**blade** <div class="textarea_wrap"> <div id="textarea-view"> textareaに入力したテキストが表示されます。 </div> </div>
**jquery** $('.textarea_wrap').each(function(){ // クリック時、テキスト部分がtextareaに変更される $(document).on('click', '#textarea-view', function (e) { let inputElement = $('<textarea id="textarea-input" class="cms-f-edit-textarea">' + '</textarea>'); //#textarea-viewは非表示にする $("#textarea-view").addClass('cms-none'); $("#textarea-view").prepend(inputElement); inputElement.focus(); // マークダウンテキスト付与ボタン let text_editer = '<div class="text_editer">'; text_editer += '<div class="flex">'; text_editer += '<div class="editer_bold">太字</div>'; text_editer += '<div class="editer_italic">斜体</div>'; text_editer += '<div class="editer_underline">下線</div>'; text_editer += '<div class="editer_rightAlign">右寄せ</div>'; text_editer += '<div class="editer_link">リンク</div>'; text_editer += '</div>'; text_editer += '</div>'; $(this).append(text_editer); // 太字ボタンを押したときの挙動 $(document).on('click', '.editer_bold', function(){ let elm = $(inputElement)[0]; let value = $(inputElement).val(); let head = value.slice(0,elm.selectionStart); let foot = value.slice(elm.selectionEnd); let newValue = head + '## ここにテキストを入れてください' + foot; $(inputElement).val(newValue); }); // 斜体を押したときの挙動 $(document).on('click', '.editer_italic', function(){ let elm = $(inputElement)[0]; let value = $(inputElement).val(); let head = value.slice(0,elm.selectionStart); let foot = value.slice(elm.selectionEnd); let newValue = head + '_ここにテキストを入れてください_' + foot; $(inputElement).val(newValue); }); // 下線を押したときの挙動 $(document).on('click', '.editer_underline', function(){ let elm = $(inputElement)[0]; let value = $(inputElement).val(); let head = value.slice(0,elm.selectionStart); let foot = value.slice(elm.selectionEnd); let newValue = head + '<u>ここにテキストを入れてください</u>' + foot; $(inputElement).val(newValue); }); // 右寄せ $(document).on('click', '.editer_rightAlign', function(){ $('.section_textarea').css('text-align','right'); }); // リンク $(document).on('click', '.editer_link', function(){ let elm = $(inputElement)[0]; let value = $(inputElement).val(); let head = value.slice(0,elm.selectionStart); let foot = value.slice(elm.selectionEnd); let newValue = head + '[ここにテキストを入れてください](URLを入れてください)' + foot; $(inputElement).val(newValue); }); }); // 入力欄にフォーカスイン時、フォーカスアウトのイベントを埋め込む $(document).on('focusin', '#textarea-input', function (e) { let element = $(e.target); element.on('focusout', function (e) { // マークダウンされた結果を反映 var html = marked.parse($(this).val()); $('#textarea-input').html(html);   $('.text_editer').remove(); textFocusOut('#textarea-view', '#textarea-input'); }); }); }); **textFocusOut 関数** function textFocusOut(viewId, inputId) { let viewObj = $('#' + viewId); let inputObj = $('#' + inputId); let inputValue = inputObj.val(); viewObj.off('focusout'); let saveBlockObj = {}; saveBlockObj.sectionId = inputObj.data('section'); saveBlockObj.sectionPartsId = inputObj.data('sectionparts'); saveBlockObj.sectionPartsType = inputObj.data('partstype'); saveBlockObj.sectionContent = inputValue; }

困っていること・知りたいこと

マークダウン付与ボタンのクリックイベントが発火しないため、textareaに入力されず、foucusoutされてしまい、1の状態になってしまう。
(console.logをクリックイベントに付けたが、表示されなかった)

・foucusoutを無くすとマークダウン付与ボタンによる入力はできるが、
1の状態に戻すことができず、テキストがマークダウン化されているか分からない。

実装部品の状態

1.「.text_editer」はposition: absolute; を付与して、「#textarea-input」上部に表示される
2.「#textarea-input」にposition: relative;を付与しても「.text_editer」の親要素にできないため、「.textarea_wrap」を親要素にしている。

「.textarea_wrap」を親要素にしているから、foucusoutが発火してしまうと思うのですが、ここじゃないと「.text_editer」が表示できないし…と、うまくできなくて悩んでいます。

マークダウン付与ボタンのクリックイベントをfoucusoutに邪魔させず発火させるには、
どうしたら良いのか、教えて頂きたいです。
よろしくお願いします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問