JQuery. Как изменить стиль выделенного текста?

329

06 января 2021, 01:30

Нагуглил метод select(), но все равно ничего не выходит.

$("p").select(function() { 
  $(this).css("color", "red").css("font-size", "20px") 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<p>Hello</p>

Answer 1

CSS::selection, но он поддерживает только цвет текста и фона.

Вариант CSS:

.moo {width: 200px;} 
.moo::selection { 
  color: #800; 
  background-color: orange; 
}

<p class="moo">С точки зрения банальной эрудиции, каждый индивидуум, критически мотивирующий абстракцию, не может игнорировать поляризаторы утопического субъективизма</p>

А JS событие select работает только для элементов input и textarea. Даже contenteditable-div не работает с ним. Поэтому чтобы менять шрифт и размер выделенного текста, скорее всего нужно придумать какой-нибудь лютый костыль, который в зависимости от направления мышки будет динамически добавлять и удалять какой-нибудь <span class=".."> из текста, который заранее будет содержать необходимые стили.

Answer 2

Добавил класс элементу (не обязательно). jQuery метод .select() привязывает JavaScript обработчик событий "select" (срабатывает при выделении текста), или запускает это событие на выбранный элемент. Метод используется с элементом <input> (с текстовым типом type = "text") и элементом <textarea> (источник с примерами).

$('.example').on('click', function(){ 
  $(this).css("color", "red") 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<p class="example">Кликни и я стану красным!<p>

С использованием метода .select

$("input").select(function() { 
  $(this).css("color", "red").css("font-size", "20px") 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<label> 
  <p> 
    <input type="text" value="text" style="border:none; outline:none;"> 
  <p> 
</label>