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

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

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

<!doctype html>
<html>
<head>
<title>Добавление слов из текстового поля в поле TEXTAREA</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
function f_click() {
   var pole1 = $("#pole1");
   var pole2 = $("#pole2");
   var txt1 = pole1.val();
   var txt2 = pole2.val();
   if (txt1 != "") {
      pole2.val(txt2 + txt1 + "\n");
      pole1.val("").focus();
   }
   else {
      alert("Поле не заполнено!");
      pole1.focus();
   }
}
$(document).ready(function() {
   $("#pole1").focus();
   $("form").submit(function() {
      var val = $("#pole2").val();
      alert("Текущее значение: \n" + val);
      $("#pole1").focus();
      return false;
   });
   $("#pole1").keypress(function(e) {
      if (e.keyCode==13) {
         f_click();
         return false;
      }
   });
   $("#btn1").click(function() {
      f_click();
   });
});
</script>
</head>
<body>
<form action="test.php" method="GET">
Слово:<br>
<input type="text" name="pole1" id="pole1"><br>
<input type="button" value="Добавить слово" id="btn1"><br>
<textarea name="pole2" id="pole2" cols="15" rows="10">
</textarea><br>
<input type="submit" value=" Значение поля ">
</form>
</body>
</html>
Предыдущая статья Все статьи Следующая статья