0

Нагуглил метод 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>

2 ответа 2

2

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=".."> из текста, который заранее будет содержать необходимые стили.

-1

Добавил класс элементу (не обязательно). 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>

1
  • Видимо Вы плохо прочитали вопрос, минус к ответу.
    – meine
    24 мая 2019 в 19:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.