Изменение цвета в textarea с помощью JQuery

#javascript #html #jquery #css

Здравствуйте, есть сайт, на нем есть textarea, в ней нужно сделать так чтобы к примеру,
если пользователь вводит "#" то вся строка стала красным, а не весь текст в textarea.
Уже и там и так пробовал, получается только изменить цвет шрифта во всем texarea, а
не с определенного символа и к примеру по конец строки. Вот мой код, на чем я остановился...

$(document).ready(function(){

    $(".txt_send").change(function(){
        var text = $('.txt_send').val();
        $(".txt_send").css("color", "#F00");
    });

});

    

Ответы

Ответ 1

В не можете поменять отдельно взятую линию текста из области textarea. 

Textarea может содержать только обычный текст. С общей заменой цвета, размера текста,
и шрифтов, как в обычном input.   

В вашем случае можно использовать что то вроде редактора WYSIWYG (CKEditor или TinyMCE)


Ответ 2

В textarea это сделать невозможно. Вы можете использовать contenteditable для этого:



code.onkeypress = e => {
  if(e.key === '#'){
    const selection = window.getSelection();
    const red = document.createElement('span');
    red.style.color = 'red';
    selection.anchorNode.parentNode.insertBefore(red, selection.anchorNode);
    red.appendChild(selection.anchorNode);
  }
}

Строчка

Поставь сюда # 

Строчка



Ответ 3

Можно попробовать сделать эмуляцию textarea, на contenteditable блоке и при редактировании
следить за тем , что если попадает символ '#' то вычислять содержание и "номер" строки
по координатам символа от начала блока и окрашивать всю строку.

Придется много чего учесть: размер шрифта, возможность редактирования из любого места
в тексте, переносы строк и пр.