Всем привет и приступим к делу! Допустим у нас есть некое текстовое поле
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Работа с текстом в поле</title>
</head>
<body>
<textarea cols="30" rows="10">
Эта ошибка возникает при неправильном использовании функции eval.
Для синтаксических ошибок предусмотрен тип SyntaxError.
<textarea>
</body>
</html>и мы хотим выделить текст целиком при фокусе в этом поле.
Для этого существует метод select();
Мы можем реализовать выделение через атрибут
onfocus="this.select();"или вынести это все в отдельный js код
document.querySelector('textarea').addEventListener('focus', function(){
this.select();
});Как видите при фокусировке в поле у нас выделяется текст.
Давайте теперь с вами рассмотрим как определять позицию курсора в поле.
Для этого существуют свойства selectionStart и selectionEnd начальная позиция и конечная
Пример , возьмем предыдущий код
document.querySelector('textarea').addEventListener('focus', function(){
this.select();
var start_position = this.selectionStart;
var end_position = this.selectionEnd;
console.log(start_position,end_position);
});теперь у нас помимо выделения в консоль выводится начальная и конечная позиция выделения.
Если мы ничего не выделяем, то у нас значения конечной позиции и начальной равны между собой, давайте поменяем событие на click и рассмотрим следующий код:
document.querySelector('textarea').addEventListener('focus', function(){
var start_position = this.selectionStart;
var end_position = this.selectionEnd;
console.log(start_position,end_position);
});как видите при клике по текстовому полю нам выводится текущая позиция курсора.
Все это конечно замечательно теперь давайте рассмотрим где мы можем это использовать.
Допустим мы делаем некий редактор кода с помощью которого можем оборачивать выделенный текст в определенный тег.
<textarea cols="30" rows="10">
Эта ошибка возникает при неправильном использовании функции eval.
Для синтаксических ошибок предусмотрен тип SyntaxError.
<textarea>
<br/>
<button >p</button>
<script>
document.querySelector('button').addEventListener('click', function(){
var tag = this.innerHTML,
textrea = document.querySelector('textarea');
var start_position =textrea.selectionStart;
var end_position = textrea.selectionEnd;
textrea.innerHTML=
textrea.innerHTML.substring(0,start_position)+
'\r\n'+
'<'+tag+'>'+
'\r\n'+
textrea.innerHTML.substring(start_position,end_position)+
'\r\n'+
'</'+tag+'>'+
'\r\n'+
textrea.innerHTML.substring(end_position,textrea.innerHTML.length);
});
</script>Может быть немного усложнено, но суть вы я думаю поняли.
При нажатии на кнопку button мы контексте определяем название тега, затем находим позиции выделения текста . И формируем новую структуру нашего текста в поле с помощью функции substring в которой определяется начальная и конечная позиция подстроки. Мы также может что либо вставлять динамически в текст в поле зная текущую позицию курсора.
Вот и все что я вам хотел рассказать про работу с курсором и выделением в полях.
Надеюсь данная статья была для вас полезна и вы узнали что то новое!
Удачи!
