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

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

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

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

Q&A

解決済

1回答

1510閲覧

[jQuery]iphone safariでgetSelection()がうまく動作しない

987654321

総合スコア28

JavaScript

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

0グッド

0クリップ

投稿2021/02/01 02:51

編集2021/02/01 03:01

やっていること

divにcontenteditableをつけた物からキャレットを外したら、最後にキャレットがあった位置を変数(_range.lastRange)に保存するしようとしております。
コンソールで確認してみたのですが、うまく選択されていない状態です。
androidやブラウザですとうまくいきます。

コード

jquery

1$("#hoge").on("blur", function(event) { 2 if(_range.lastRange == null) { 3 var selection = $("#hoge").context.getSelection() 4 console.log(selection) 5 if( 0 < selection.rangeCount ) { 6 _range.lastRange = selection.getRangeAt(0).cloneRange(); 7 } 8 } 9 });

コンソールの結果

Selection anchorNode: null anchorOffset: 0 baseNode: null baseOffset: 0 extentNode: null extentOffset: 0 focusNode: null focusOffset: 0 isCollapsed: true rangeCount: 0 type: "None" __proto__: SelectionPrototype

調べてみたこと

MDNを確認してみましたが、対応しているということです。
https://developer.mozilla.org/ja/docs/Web/API/Window/getSelection

下記のURLに書いてあるように

css

1[contenteditable] { 2 -webkit-user-select: auto; 3 user-select: all; 4}

を書いてみましたが、解決しませんでした。
https://stackoverflow.com/questions/35281283/safari-getselection-not-working

対応方法などをご存知のかたがいらっしゃいましたら、教えて頂けると有難いです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

blurイベントが発生する時点で既にフォーカスが外れていて、セレクションも移動済みのようですね。「フォーカスが外れる直前」にコードを動かすためのイベントはないと思うので、セレクションの変更を常に監視するしかないと思います。

javascript

1document.addEventListener('selectionchange', () => { 2 // 目的の要素にフォーカスが当たっていたら 3 if (document.activeElement == document.querySelector('#hoge')) { 4 // _range.lastRange を更新する 5 } 6});

投稿2021/02/01 03:49

int32_t

総合スコア20659

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問