Активность Textarea при нажатии на кнопку

134
11 мая 2018, 11:35

я новичoк, но стараюсь практиковаться по ходу самообучения. Подскажите, пожалуйста, у меня есть два textarea и двe кнопки, которые только визуально относятся к этим окнам. Как мне сделать активным актуальное окно при нажатии на кнопку, которая находится над ним? Спасибо

Answer 1

// выбираем все кнопки со станицы 
const buttons = document.querySelectorAll('button[data-target]'); 
 
for (const button of buttons) { 
  // выбираем селектор, соответствующий текстовому полю 
  const target = button.dataset.target; 
  // если такой селектор определён... 
  if (target) { 
    // находим текстовое поле для этой кнопки 
    const textarea = document.querySelector(target); 
     
    // если поле нашлось 
    if (textarea) { 
      // вешаем на кнопку обработчик события "клик" 
      button.addEventListener('click', event => { 
        // по клику меняем значение свойства "выключно" на противоположное 
        textarea.disabled = !textarea.disabled; 
        // возможно я не правильно понял, что именно нужно сделать с 
        // этим полем, возможно вы имели в виду, что нужно навести фокус. 
        textarea.focus(); 
      }); 
    } 
  } 
}
<textarea disabled="disabled" id="ta1"></textarea> 
<button data-target="#ta1">Toggle</button> 
 
<br> 
 
<textarea id="ta2"></textarea> 
<button data-target="#ta2">Toggle</button>

Answer 2
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<textarea class="area_1">1</textarea>
<input type="button" class="button_1" placeholder="1">
<textarea class="area_2">2</textarea>
<input type="button" class="button_2" placeholder="2">
<script>
$(document).on('click','.button_1',function(){
        if($('.area_1').hasClass('opened')){
            $('.area_1').removeClass('opened');
        }
        else{
            $('.area_1').addClass('opened');
      $('.area_1').focus();
        }
    });
  $(document).on('click','.button_2',function(){
        if($('.area_2').hasClass('opened')){
            $('.area_2').removeClass('opened');
        }
        else{
            $('.area_2').addClass('opened');
      $('.area_2').focus();
        }
    });
</script>

Демо: https://jsfiddle.net/ede9k5un/

Answer 3

const textarea = document.querySelectorAll('textarea'); 
 
[...document.querySelectorAll('button')].forEach((s, i, arr) => { 
  s.addEventListener('click', function() { 
    for (let i = 0; i < textarea.length; i++) { 
      textarea[i].removeAttribute('disabled') 
    } 
    textarea[i].setAttribute('disabled', 'disabled') 
  }) 
})
<textarea disabled></textarea> 
<button>Toggle</button> 
 
 
<textarea></textarea> 
<button>Toggle</button>

READ ALSO
Как убрать маркеры у путевых точек? (яндекс map api)

Как убрать маркеры у путевых точек? (яндекс map api)

У меня есть 2 путевые точки и некоторое количество транзитных точекЭти точки формируют маршрут

117
Js: Загрузка картинок в окно

Js: Загрузка картинок в окно

мне необходимо нажимая на ссылку, создавать программно окно в которое должна загружаться картинка, на другую ссылку ещё картинка и того уже...

108
создать окно выезжающее сбоку и висящее [требует правки]

создать окно выезжающее сбоку и висящее [требует правки]

Это окно сделано на основе JampPanel на JavaScript http://forummybb

137