Помогите переделать js для нескольких форм с разным id на странице

Рейтинг: 0Ответов: 1Опубликовано: 21.04.2023

Помогите пожалуйста переделать js для нескольких форм с разным id на странице.

Есть форма по клику на картинку в форму вставляется бб коды по alt'у... Проблема в том, что таких textarea id=user_text2, textarea id=user_text3, textarea id=user_text... много и чтобы код вставлялся именно в нужную textarea?

Пробовал element = document.getElementById('user_text'+id); не работает... Помогите разобраться.

$(document).ready(function() {
  $('.bb_bar a').click(function() {
    var button_id = attribs = $(this).attr("alt");
    button_id = button_id.replace(/\[.*\]/, '');
    if (/\[.*\]/.test(attribs)) {
      attribs = attribs.replace(/.*\[(.*)\]/, ' $1');
    } else attribs = '';
    var start = '[' + button_id + attribs + ']';
    var end = '[/' + button_id + ']';
    insert(start, end);
    return false;
  });
});

function insert(start, end) {
  element = document.getElementById('user_text');
  if (document.selection) {
    element.focus();
    sel = document.selection.createRange();
    sel.text = start + sel.text + end;
  } else if (element.selectionStart || element.selectionStart == '0') {
    element.focus();
    var startPos = element.selectionStart;
    var endPos = element.selectionEnd;
    element.value = element.value.substring(0, startPos) + start + element.value.substring(startPos, endPos) + end + element.value.substring(endPos, element.value.length);
  } else {
    element.value += start + end;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bb_bar">
  <a href="#" alt="b">Жирный</a>
  <a href="#" alt="i">Курсив</a>
  <a href="#" alt="u">Подчеркнутый</a>
  <a href="#" alt='a[href=""]'>Ссылка</a>
</div>
<textarea id="user_text"></textarea>

<div class="bb_bar">
  <a href="#" alt="b">Жирный</a>
  <a href="#" alt="i">Курсив</a>
  <a href="#" alt="u">Подчеркнутый</a>
  <a href="#" alt='a[href=""]'>Ссылка</a>
</div>
<textarea id="user_text"></textarea>

javascript jquery textarea
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Помогите пожалуйста переделать js для нескольких форм с разным id на странице.

Если "обернуть" пары

  • Кнопки
  • Редактор

Добавить классы одинаковым элементам. И работать через родителя...

$(document).ready(function() {
  $('.bb_bar a').click(function() {
    var button_id = attribs = $(this).attr("alt");
    button_id = button_id.replace(/\[.*\]/, '');
    if (/\[.*\]/.test(attribs)) {
      attribs = attribs.replace(/.*\[(.*)\]/, ' $1');
    } else attribs = '';
    var start = '[' + button_id + attribs + ']';
    var end = '[/' + button_id + ']';
    insert(start, end, this.closest('section'));
    return false;
  });
});

function insert(start, end, parent) {
  element = parent.querySelector('.user_text');
  if (document.selection) {
    element.focus();
    sel = document.selection.createRange();
    sel.text = start + sel.text + end;
  } else if (element.selectionStart || element.selectionStart == '0') {
    element.focus();
    var startPos = element.selectionStart;
    var endPos = element.selectionEnd;
    element.value = element.value.substring(0, startPos) + start + element.value.substring(startPos, endPos) + end + element.value.substring(endPos, element.value.length);
  } else {
    element.value += start + end;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="bb_bar">
    <a href="#" alt="b">Жирный</a>
    <a href="#" alt="i">Курсив</a>
    <a href="#" alt="u">Подчеркнутый</a>
    <a href="#" alt='a[href=""]'>Ссылка</a>
  </div>
  <textarea id="user_text1" class="user_text"></textarea>
</section>

<section>
  <div class="bb_bar">
    <a href="#" alt="b">Жирный</a>
    <a href="#" alt="i">Курсив</a>
    <a href="#" alt="u">Подчеркнутый</a>
    <a href="#" alt='a[href=""]'>Ссылка</a>
  </div>
  <textarea id="user_text2" class="user_text"></textarea>
</section>