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_, тоже не канает. Там работа с обычными элементами, да и тоже не все так гладко как хотелось бы.

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

скорее конечно:чем:потому что даже если я создам свой textarea из того же DIV элемента, их метод работать лучше не станет. Потому что он работает одинаково как на элементах, так и на textarea

Предлагаю посмотреть в сторону редакторов типа Ace.
Внутри них используется monospace шрифт, поэтому там это не проблема,
и они это делают.

мне не нужно что бы была привязка к конкретному шрифту, нужно что бы работало не зависимо от стилей и прочих плюшек...

Но я уже почти реализовал для себя то что мне нужно, просто мало времени свободного что бы доделать это до конца.

Вроде как для позиции курсора, выраженная в символах, - давно есть наработанные кроссбраузерные библиотеки, хотя бы в той же форме ответа в phpBB, поскольку вставка-замена там полным ходом.
Считывать font-style текущего textarea и параметры шрифта вроде(размер, отступы строк и символов) тоже не сложно, контекст в данной текущей строке тоже можем определить, так что мешает создать аналогичную строку(cтроки) в div c позицией абсолюте слоем ниже, обернув последний символ перед кусором в span(или сам эквивалентный символ курсора) вычислить точные пиксельные координаты ?
Т.е задача сводится к вопросу: есть разница в координатах одного и того же текста в div и textarea с одними и теми стилевыми свойствами ?

Ну, можно пойти путём самурая и воссоздать textarea на canvas, и реализовать нужное АПИ :) я даже такие проекты в своё время видел.

Это уже можно назвать скорее извращением, ибо ради мелочного функционала проделать такую работу, это явно нужно ОООчень сильно нуждаться в обсуждаемом в теме функционале)