Выделение текста в input, textarea и тегах

Выделение текста в input, textarea и тегах

При создании информеров на многих сайтах предоставляется код, который можно скопировать и быстро разместить на свой сайт. Чтобы еще больше упростить жизнь пользователю, код скрипта должен выделяться при клике на textarea или input.Данное действие легко организовать средствами jQuery. Для этого надо использовать метод .select() и подключенную библиотеку от 1.6 версии и выше. Рассмотрим примеры:

1. Выделить текст при клике на label:

<input id="vidtext" type="text" value="Я буду выделен"> <label id="vid">Выделить</label>
<script type="text/javascript"> $("#vid, #vidtext").click(function() { $("#vidtext").select(); }); </script>

Здесь мы может выделить текст input-а при клике как на label или на него самого. Вместо input-а может быть textarea, а вместо label - любой другой тег.

2. Определить, что текст был выделен в textarea

<textarea class="saver">Текст</textarea>
<script type="text/javascript"> $( ".saver" ).select(function() { alert("Выделили!"); }); </script>

За счет .select() мы можем не только выделяить содержимое форм, но и отслеживать изменения произведенные пользователем. Минусом select() является возможность работы только с input или textarea. А что, если нам нужно выделить какой-нибудь произвольный div или span тег? В этом поможет код на JavaScript, который я нашел в сети.

3. Выделить содержимое любого div-а по клику

<div class="example">Текст для примера</div>
<script type="text/javascript">
$('.example').click(function() {
var e=this;
if(window.getSelection){ var s=window.getSelection();
if(s.setBaseAndExtent){ s.setBaseAndExtent(e,0,e,e.innerText.length-1); }
else{ var r=document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r);} }
else if(document.getSelection){ var s=document.getSelection(); var r=document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r); }
else if(document.selection){ var r=document.body.createTextRange(); r.moveToElementText(e); r.select();}
});
</script>

В этом скрипте при клик на div с классом example выделится его содержимое. Этот код является кроссбраузерным вариантом выделения текста.

 

| | Выделение текста в input, textarea и тегах | При создании информеров на многих сайтах предоставляется код, который можно скопировать и быстро разместить на свой сайт. Чтобы еще больше упростить ж |