Расчет xy-позиции выбора текста

Я пытаюсь создать свой собственный выбор текста с помощью DOM-элементов. Да, я имею в виду синий фон, который вы видите за текстом, когда вы выбираете его в этом элементе. Идея состоит в том, чтобы остановить поведение по умолчанию (синий цвет) и использовать мои собственные элементы для выполнения задания, найдя xy-позицию выбора и затем помещая элементы с абсолютным позиционированием. Я хочу иметь возможность сделать это с помощью обычного div.Расчет xy-позиции выбора текста

Я думаю, мне нужно 3 элемента. Один для верхнего ряда (который может быть неполным), один для среднего фрагмента, один для последнего (тот же, что и верхний). Вот изображение, которое поможет вам понять: Image showing the needed selection elements

Я думал ловить mouseup/down, а затем mousemove, а затем проверить window.getSelection(), но до сих пор у меня возникают проблемы при получении в любом месте.

Использование CSS ::selection не будет работать, потому что элемент не будет иметь фокуса.

Я ценю всю помощь, которую я могу получить! Заранее спасибо.

Редактировать: Наткнулся на https://code.google.com/p/rangy/, который может быть полезен? Любой, у кого есть опыт работы с этим плагином?

Редактировать2: Требуется кросс-браузерная поддержка.

источник

2013-07-10 Firas Dib

Я не уверен, что вы можете предотвратить выделение текста без отключения функций. ['user-select '] (https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) позволяет предотвратить выбор области, но это означает, что вы не сможете разрезать и вставить. Другая проблема - производительность. Использование javascript для рендеринга выделения будет намного медленнее, чем буква, которую браузер/os делает изначально. –

@IsaacSuttell: Вы не можете уловить 'onselect' и предотвратить действие по умолчанию? Я бы так подумал. Но это, вероятно, также уничтожит функцию 'window.getSelection()'. Я не думаю, что будет огромный успех, всего три элемента. Кажется, что Codemirror справляется с этим довольно хорошо, но я понятия не имею. –

Я считаю, что '' onselect' ограничено тегами формы (http://www.w3schools.com/jsref/event_onselect.asp). –

Вы можете использовать getClientRnge:

var element = document.getElementById('element') 

element.onmouseup = function(){ 
    var selection = document.getSelection(), 
     range  = selection.getRangeAt(0), 
     clientRects = range.getClientRects() 

    console.log(clientRects) 
}

http://jsfiddle.net/XjHtG/

Это вернет левый, правый, верхний, нижний, ширина и высота всех выбранных опций.

источник

2013-07-10 11:30:41 Mircea

Прохладный! Любая идея о том, как можно остановить поведение по умолчанию? Любая поддержка IE возможна? –

Вы можете использовать event.preventDefault, но тогда не будет выбора для получения X/Y. Просто спрячьте его с помощью :: выбора http://jsfiddle.net/XjHtG/2/ – Mircea

Я думаю, что я на правильном пути. Несколько перегибов, чтобы разобраться, хотя IE-suupport является одним из них. Вот что я до сих пор: http://jsfiddle.net/XjHtG/7/. Мой метод (описанный на рисунке) - вид работ, за исключением случаев, когда вы выбираете слово где угодно до «Я» (крайний правый, третий ряд снизу). Также не совсем уверен, как поддержать выбор, сделанный с помощью клавиатуры. –

Расчет xy-позиции выбора текста

ответ

Смежные вопросы