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

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

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

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

2608閲覧

contenteditable="true"にしたdiv要素をフォーカス時に中身の文字を全選択にしたいが効かない

dimyas

総合スコア24

div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/08/27 00:31

html

1 <div id="target" contenteditable="true">文字を入力</div>

jQuery

1 document.getElementById('target').addEventListener('focus',function(){ 2 3 $(this).select();//ここで"文字を入力"を選択する 4 console.log(this);//ログは出力される 5 6 });

contenteditable="true"ではなくtextareainut[type="text"]でないと全選択できないのでしょうか?

詳しい方ご教授いただければ幸いです。

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

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

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

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

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

guest

回答2

0

input/textarea と contenteditable はかなりAPIが異なります。全選択するには SelectAll コマンドを使います。

js

1document.getElementById('target').addEventListener('focus', function() { 2 document.execCommand('SelectAll'); 3});

投稿2021/08/28 04:19

int32_t

総合スコア21597

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

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

0

contenteditableな要素は入れ子を持つ可能性があるため単純には
範囲選択はできません

sample

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 const target=document.querySelector('#target'); 4 target.addEventListener('focus',()=>{ 5 const r=document.createRange(); 6 r.setStart(target,0); 7 r.setEnd(target,1); 8 window.getSelection().addRange(r); 9 }); 10}); 11</script> 12<div id="target" contenteditable="true">文字を入力</div>

投稿2021/08/27 02:30

編集2021/08/27 02:45
yambejp

総合スコア116441

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

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

dimyas

2021/08/28 01:52

コメントありがとうございます。 そのコードを試してみたらうまく全体選択されました。 2回目以降はフォーカスしても全体選択されないのはなぜでしょうか? ページを再読み込みしてからなら再度、全体選択できるようになります。 contenteditableな要素の中のテキストの一部を選択して、その両端をspanタグで挟んで色などのスタイルを変えさせることも入れ子を持つ可能性があるによって難しくなったりしますか?
int32_t

2021/08/28 04:23 編集

現状のコードは、「最初の子ノード1つだけ選択」になってますね。 setEnd() の 1 を target.childNodes.length などに修正する必要があります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.37%

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

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

質問する

関連した質問