cpp

Поле для ввода многострочного текста

Рассмотрим возможность добавления слов из текстового поля в поле для ввода многострочного текста (листинг 1.22). Добавить слово можно с помощью кнопки Добавить слово или клавиши <Enter>. Так как по умолчанию нажатие <Enter> приводит к отправке данных формы, то событие прерывается за счет возврата значения false. При щелчке на кнопке Значение поля выводится текущее значение поля <textarea>.

Листинг 1.22. Добавление слов из текстового поля в поле <textarea>

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Добавление слов из текстового поля в поле textarea</title>
</head>
<body>
<div class="container my-3">
  <form action="#" method="GET" id="frm">
    <div class="form-group">
      <label for="txt1">Слово:</label>
      <input type="text" class="form-control"
             name="txt1" id="txt1">
    </div>
    <button type="button" class="btn btn-primary"
            id="btn1">Добавить слово</button>
    <textarea name="txt2" id="txt2" rows="10"
              class="form-control my-3"></textarea>
    <button type="submit" class="btn btn-primary">
       Значение поля</button>
  </form>
</div>

<script src="js/jquery.min.js"></script>
<script>
function addWord() {
   var txt1 = $('#txt1');
   var txt2 = $('#txt2');
   var txt1_val = txt1.val();
   var txt2_val = txt2.val();
   if (txt1_val !== '') {
      txt2.val(txt2_val + txt1_val + '\n');
      txt1.val('')[0].focus();
   }
   else {
      window.alert('Поле не заполнено!');
      txt1[0].focus();
   }
}
$(function() {
   $('#txt1')[0].focus();
   $('#frm').submit( function() {
      var val = $('#txt2').val();
      window.alert('Текущее значение: \n' + val);
      $('#txt1')[0].focus();
      return false;
   });
   $('#txt1').keypress( function(e) {
      if (e.which === 13) {
         addWord();
         return false;
      }
   });
   $('#btn1').click( function() {
      addWord();
   });
});
</script>
</body>
</html>

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

cpp