Переместить текстовое поле курсором на курсор

Question

У меня есть текстовое поле, которое при наведении курсора я хотел бы, чтобы каретка следовала за курсором. Было бы так, если бы я щелкнул текстовое поле каждый раз, когда я двигал мышью. Вот мой текущий js:

$("textarea").on("mousemove", function() { 
    $(this).trigger("click"); 
}); 

Я не хочу перемещать мышь, но каретка в текстовом поле. Codepen link

---

Update

jQuery Set Cursor Position in Text Area похожи, но как я могу использовать координаты мыши, чтобы установить положение CARETS с помощью этого метода. Если я получу X: 120 Y: 244, как я могу использовать этот метод для установки каретки

Answer 1

Существует несколько причин, по которым вы можете пересмотреть реализацию такой функции.

1. Производительность mouseover вызывает много событий в очень короткий промежуток времени, в котором вы должны пересчитать позицию курсора. На низкоуровневых устройствах (например, нетбуках или смартфонах) это очень быстро становится очень медленным.

2. Юзабилити В случае ноутбуков и нетбуков может легко случиться так, что вы случайно коснуться вашей сенсорной панели, и для этого случайно переместить курсор на совершенно новую позицию, которая может быть очень раздражает.

3. Поддержка Учтите, что большинство сенсорных компьютеров, таких как планшеты и смартфоны, не смогут использовать вашу функцию.

4. Использование Я не могу придумать какой-либо случай использования, когда эта функция может быть полезной. Единственное, что вы выиграли, - это меньше щелчка на стороне пользователя. Учтите, что пользователь уже переместил курсор в определенную позицию, которую он хочет редактировать. Еще одно нажатие пальца не требует никаких усилий.

Тем не менее, если вы все-таки решили пойти на это по какой-либо причине вы получили то, что вам нужно сделать, это получить высоту строки каждой строки поля TEXTAREA. Используйте моно шрифт, где каждый символ имеет одинаковую ширину. Получите высоту и ширину поля textarea. Получите скрытую часть поля textarea, когда полоса прокрутки находится не вверху. И, наконец, найдите позицию курсора внутри текстового поля. Из всех этих данных вы можете вычислить индекс строки, а затем использовать функцию jquery, с которой вы связаны, где оба аргумента одинаковы. $("textarea").selectRange(pos, pos);