0

Есть обычное поле для ввода текста:

<textarea name="description" rows="10" cols="70">'.$row[descr].'</textarea>

В поле ставятся некоторые html теги. Можно как то, через JavaScript например добавить кнопку, которая, при нажатии будет добавлять к набранному тексту тег <br>?

2
  • наверно, не java, а javascript. это как «город» и «огород», только несколько букв совпадают. 21 мая 2018 в 10:32
  • @Андрей, если вас мой ответ удовлетворил, то поставьте галочку рядом с ответом слева, пожалуйста.
    – Bharatha
    21 июн 2018 в 6:07

3 ответа 3

2

document.querySelector('.addBr').onclick = function () {
  document.querySelector('textarea').value = document.querySelector('textarea').value + '<br>'
};
<textarea name="description" rows="10" cols="70">
    asdasd
    asdasd
    asdasd
    asdasd
</textarea>

<button class='addBr' type="button">add br</button>

2
  • Не понимаю, здесь в примере код выполняется, а на своей тестовой странице ничего не происходит. 21 мая 2018 в 11:43
  • выводить пробовал через console.log() значение и еще вопрос у тебя textarea один? 21 мая 2018 в 14:04
0

В свое время тоже была такая задача, сделать простенький редактор

В итоге я решил задачу через добавление простой панельки инструментов

Демо там 404 сейчас, но исходник с примеров в архиве качаются нормально

Опишу суть работы. При создании панелька инструментов привязывается к определенной textarea, а при нажатии кнопок из textarea вынимаются данные - положение курсора, выделение и так далее. После того, как данные удалось вынуть, предпринимаются действия - добавить тег в позицию курсора, обрамить выделение тегами или что-то еще

Вы можете подключить готовый BBEditor, убрать лишние кнопки, добавить свои кнопки для своих тегов, поменять поведение и так далее. Можно стилизовать и поменять тему/кнопки/картинки

А можно просто посмотреть исходник и скопировать только то что вам нужно:

function doAddTags(tag1, tag2, obj) {
    var postfix = "";
    var suffix = "";

    if (tag1 == "[blockquote]" || tag1 == "[pre]") {
        suffix = postfix = "\r\n";
    }

    textarea = document.getElementById(obj);
    if (document.selection) {// Code for IE
        textarea.focus();
        var sel = document.selection.createRange();
        //alert(sel.text);
        sel.text = tag1 + suffix + sel.text + postfix + tag2;
    } else {// Code for Mozilla Firefox
        var len = textarea.value.length;
        var start = textarea.selectionStart;
        var end = textarea.selectionEnd;

        var scrollTop = textarea.scrollTop;
        var scrollLeft = textarea.scrollLeft;

        var sel = textarea.value.substring(start, end);
        //alert(sel);
        var rep = tag1 + suffix + sel + postfix + tag2;
        textarea.value = textarea.value.substring(0, start) + rep + textarea.value.substring(end, len);
        textarea.scrollTop = scrollTop;
        textarea.scrollLeft = scrollLeft;
    }
}

Это функция, обрамляющая выделение двумя тегами, например [b]...[/b]. Лаконично и кратко

В вашем случае добавить <br> по клику можно примерно вот так:

function brClick(textarea_id) {
  var tag1 = '';
  var tag2 = '<br>';
  var suffix = '';
  var postfix = '';

  textarea = document.getElementById(textarea_id);
  if (document.selection) { // Code for IE
    textarea.focus();
    var sel = document.selection.createRange();
    sel.text = tag1 + suffix + sel.text + postfix + tag2;
  } else {
    var len = textarea.value.length;
    var start = textarea.selectionStart;
    var end = textarea.selectionEnd;

    var scrollTop = textarea.scrollTop;
    var scrollLeft = textarea.scrollLeft;

    var sel = textarea.value.substring(start, end);
    var rep = tag1 + suffix + sel + postfix + tag2;
    textarea.value = textarea.value.substring(0, start) + rep + textarea.value.substring(end, len);
    textarea.scrollTop = scrollTop;
    textarea.scrollLeft = scrollLeft;
  }
}
<textarea id="textarea_id" rows="6" width="98%">
Some text here
with br or without
so, the end
</textarea>
<p>
  <button onclick="brClick('textarea_id')">Add <br> tag to textarea</button>
</p>

0

Вот так правильно:

document.querySelector('button').onclick = function()
{
	var ta = document.querySelector('textarea');
	ta.value += '\n';
	ta.focus(); // чтобы не терялся focus после нажатия на кнопку
};
<button type="button">Новая строка</button><br>
<textarea name="description" rows="10" cols="50">Первая строка</textarea>

В textarea тег <br> должен быть заменён на \n, поскольку иначе переноса строки не будет, а будет добавляться просто <br>, но ни как перенос строки, а как текст.

Ваш ответ

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

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