4

I've been puzzled as to why this behaviour happens on safari. I'm trying to get selection when i type some text and for that i use the window.getSelection() and it works perfectly fine on Firefox, Chrome, Opera and so on giving me something like:

Selection {}
anchorNode: text
anchorOffset: 14
baseNode: text
baseOffset: 14
extentNode: text
extentOffset: 14
focusNode: text
focusOffset: 14
isCollapsed: true
rangeCount: 1
type: "Caret"
__proto__: Selection

However on safari9 when i do the exact same thing, the result will be this:

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

I am wondering if this is something i'm doing wrong? If it's indeed a bug or it's not working is there a possible workaround? Or another method to obtain the same information that will work on most browsers?

galart
  • 56
  • 1
  • 7

2 Answers2

3

I'm running into a similar issue when I'm dealing with a contenteditable div and seems safari defaults user select to none which makes it so that user cant select anything. I did

[contenteditable] {
  -webkit-user-select: auto;
  user-select: all;
}

You can try replace [contenteditble] to input or other css elements.

theseadroid
  • 471
  • 5
  • 19
2

UPDATE

I found a clean solution : Look at this : https://github.com/megahertz/jquery.get-word-by-event

it uses the click EVENT object (cleaner than window.getSelection I think): 

var range = document.caretRangeFromPoint(event.clientX, event.clientY);

And it works great on iOS 12.

OLD POST

I had the same issue on iOS12 only (no mater -webkit-user-select)

I manage to get it work again by adding : contentEditable="true" to the Div container,

BUT (big BUT) unfortunately keyboard appears and content becomes editable !! (which is pretty much expected...)

I'm still looking for a workaround @galart Did you find something ?

Vassily
  • 899
  • 2
  • 8
  • 19