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

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

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

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

JavaScript

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

jQuery

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

HTML

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

Q&A

1回答

523閲覧

カーソル(キャレット)の位置を条件に応じて変化させる方法

beer

総合スコア19

HTML5

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

JavaScript

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

jQuery

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

HTML

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

0グッド

0クリップ

投稿2019/04/05 10:05

###実現したいこと
HTMLのcontenteditable="true"について、この中にある.iconを削除できないようにしたい。(.iconは必ず最後に来ます。)

HTMl

1<h2> 2 <span class="txt" contenteditable="true">Hello<span class="icon">★</span></span> 3</h2> 4<h2> 5 <span class="txt" contenteditable="true">World</span> 6</h2>

###試したこと
思いついたのはこの2つの条件で、これができれば.iconは削除できなくなるのではないか?と考えました。

➀もし.iconがあり、キャレットが.iconの後ろ(最後)にあるときは、キャレット位置を.iconの手前(最後から2番目)に移動する。

➁もし.iconがあり、キャレットが最後から2番目のときは、デリートが押せない。

しかしその正しい書き方がわからず、質問させて頂きます。

###該当のソースコード
こちらが自分なりに考えてみたものですが、エラーもでず、キャレット位置の情報が検索してもあまりなく、これ以上わからない状況です。

jQuery

1$(function(){ 2 $('h2').on('click',function(){ 3 if( $(this).find('span').hasClass('icon') ){ 4 var form = $(this).find('.txt').get(0); 5 var carretto = form.selectionEnd; 6 // ➀キャレットが最後のときは、最後から2番目に移動 7 if( carretto == 0 ){ 8 form.selectionEnd = 1; 9 } 10 // ➁キャレットが最後から2番目のときは、デリートが押せない 11 if( carretto == 1 ){ 12 if(e.keyCode == 46){ 13 return false; 14 } 15 } 16 } 17 }); 18});

また、もし上の➀や➁以外の方法で実現したいことが可能であれば、その方法も教えていただきたく思います。
どうぞよろしくお願い致します。

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

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

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

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

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

guest

回答1

0

Q1.は簡単そうなので

javascript

1document.addEventListener ('click', event=> { 2 let selection = event.view.getSelection(); 3 let target = event.target; 4 let doc = target.ownerDocument; 5 let icon = target.closest ('.icon'); 6 7 if (icon) { 8 let e = icon.previousSibling; 9 if (e) { 10 let range = doc.createRange (); 11 let len = e.length; 12 range.setStart (e, len); 13 range.setEnd (e, len); 14 selection.removeAllRanges (); 15 selection.addRange (range); 16 } 17 } 18}, false);

Q2.はキャレットのあるノードが最終にあり、かつ次のノードの要素に.iconがあればそのイベントをキャンセルする。かな?
<span class="icon" contenteditable="false"></span>
もっと簡単にこれだけだった。

投稿2019/04/05 21:09

編集2019/04/05 21:24
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

beer

2019/04/05 22:07 編集

おはようございます。ご回答どうもありがとうございます。 Q2はそれが良いですね。Q1もかなり良いところまで来てるのですが、★の後ろをクリックしたときにキャレットが表示されない点だけなんとかできませんでしょうか? https://jsfiddle.net/qujohn13/ このように、worldのエリアはどこをクリックしてもキャレットが表示されるが、Helloは★の後ろをクリックしたときにキャレットが表示されない。という状態です。★の後ろをクリックしても、★の手前にキャレットを表示できれば…‼
退会済みユーザー

退会済みユーザー

2019/04/06 02:37

そこはすでに inline 要素ではないので、クリックで拾うなら h2 の要素で判断することになるよ!
beer

2019/04/06 03:21

let target = event.target; ↓ let target = event.target.closest('h2'); ですか? でもこれだと結局キャレットは★の後ろになってしまいますから、何かもう一工夫ですよね。むぅ、なんでしょう。
退会済みユーザー

退会済みユーザー

2019/04/06 06:36

クリックされた時の座標と、"h2 span.icon" を取得してその要素の座標と大きさを足したものとで比べる。icon要素の座標より右側なら、・・・
退会済みユーザー

退会済みユーザー

2019/04/06 06:40

持論をかざすつもりもないけれど、見た目にこだわるwebページは、その見た目と、内容の価値が反比例する。
beer

2019/04/06 06:51

なるほど。今回はとりあえず見た目はおいとくとして、このままだといちばん大事な使い勝手が悪くないですか?どうしたらいいでしょうか…
退会済みユーザー

退会済みユーザー

2019/04/06 07:03

ヒントは書いた。あとは貴方の努力が必要です
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問