shim для caretPositionFromPoint (нужна новая мысль)
 

Привет All!

Сижу вот уже целый день, пытаюсь решить одну проблему. Нужен нормальный/корректно рабочий метод document.caretPositionFromPoint(), его ни один браузер не поддерживает (за исключением Firefox, в котором работает он кривее кривизны, поэтому будем считать что там его тоже нет).

А проблема возникла в том, что нужно определять предположительную позицию каретки над курсором (над нужными координатами) в текстовых полях, TEXTAREA/INPUT. Я начал писать некий шим для этого метода. По началу вроде все пошло норм. Писал соответственно под браузером Хром. Одним словом под webkit написать корректный метод вроде удалось.

Но вот ИЕ всех версий и ФФ, что-то мне совсем не побороть... Хоть ФФ и имеет нативную поддержку, но показывает не верные координаты каретки, если мы определяем в пределах текстового поля но не на тексте, или например если точка находиться над бордюром элемента.

Я подготовил тестовый пример, вы можете сравнить как он работает в Хроме, и как работает в ФФ... Для ИЕ там вообще нет реализации, но тоже надо будет как то его победить.

Вот пример: https://devote.github.io/tests/caret/index.html
Вот исходники: https://github.com/devote/devote.git...er/tests/caret

Если у кого есть идеи по вопросу как побороть ФФ а в идеале и ИЕ, буду очень признателен... Мои все попытки приводят к неудаче, при разных условиях использования. Работать должно так, как сейчас работает в Хроме или Сафари.

Заранее все спасибо!

devote, может использовать contenteditable + отслеживание курсора?

думал я об этом, но с contenteditable в Firefox так же проблема что и в полях textarea/input... он почему то считает что ткнув по позиции 1 или 2 см. картинку, что это не элемент


Например в реальности если в textarea ткнуть по точке 1 (см. картинку выше), каретка встанет между словом "her" и "feet". А если кликнуть по точке 2, каретка встанет между "either a" и "waistcoat-pocket". Но в Firefox он возвращает либо полную длину содержимого (то есть позицию конца всего содержимого), либо вообще нулевую позицию. На бордюре всегда возвращает позицию 2.

можно попробовать поместить позади основного input/textarea вспомогательный, который шире основного на величину границы, основная работа - на основном, работа на границе (где не работает) - во вспомогательном

Это смотрел?

bes,
не совсем понял твоей идеи.. как может помочь элемент позади, ведь у ФФ что в TEXTAREA что в обычных элементах один и тот же баг.

сейчас посмотрю) Спасибо!

это скорее попытка избавиться от позиции 2
с позицией 1 сложнее, могу только предложить двигать вспомогательный input вправо/влево до первого символа, но насколько это всё реализуемо не представляю

другой вариант для позиции 1 - добивать пробелами до границы, ориентируясь на пробелы смещаться по ним до первого символа, с учётом того, что размер в textarea можно менять, задачка ещё та :)

согласен... ФФ я пока отложил в сторону, ковыряю решение для ИЕ. В нем вроде все проще, хоть и коряво определяет. Но в ИЕ есть много разных методов, дающих хоть как то выяснить что к чему... Например в ИЕ можно получить координаты (Rect) для каждой строки. А это уже дает пищу для размышлений. А вот с ФФ пока не знаю что делать. Вариант что дал nerv_, тоже не канает. Там работа с обычными элементами, да и тоже не все так гладко как хотелось бы.