Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

Работа с выделением текста и курсором.

Работа с выделением текста и курсором.

Всем привет и приступим к делу! Допустим у нас есть некое текстовое поле

<!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 в которой определяется начальная и конечная позиция подстроки. Мы также может что либо вставлять динамически в текст в поле зная текущую позицию курсора.

Вот и все что я вам хотел рассказать про работу с курсором и выделением в полях.

Надеюсь данная статья была для вас полезна и вы узнали что то новое!

Удачи!

Оцените статью:

Статьи

Разработки

Комментарии

В данном разделе пока нет комментариев!

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm