Поле для ввода многострочного текста. Добавление слов из текстового поля в поле <textarea>
Поле для ввода многострочного текста, определяемое парным тегом
<textarea>, поддерживает те же свойства, методы и события, что и простое
поле ввода (см. разд. 3.16.6), за исключением свойства maxLength. Кроме то-
го, поддерживается еще одно свойство:
? wrap — режим переноса слов. Может принимать следующие значения:
• off — не переносить слова;
• physical — слова переносятся как на экране, так и при передаче дан-
ных серверу;
• virtual — слова переносятся только на экране, но не при передаче данных серверу.
Для примера рассмотрим возможность добавления слов из текстового поля в поле для ввода многострочного текста (листинг 3.68). Добавить слово можно с помощью кнопки Добавить слово или с помощью клавиши <Enter>. Так как по умолчанию нажатие клавиши <Enter> приводит к отправке данных формы, то всплывание события прерывается с помощью присвоения значе- ния false свойству returnValue объекта event. При нажатии кнопки Значение поля выводится текущее значение тега <textarea>.
Листинг 3.68. Добавление слов из текстового поля в поле <textarea>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Пример использования поля <TEXTAREA></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-
1251">
<script type="text/javascript">
<!-
function f_submit() {
var value1 = document.getElementById("pole1").value;
window.alert("Текущее значение: \n" + value1);
return false;
}
function f_click() {
var pole2 = document.getElementById("pole2");
var text1 = pole2.value;
if (text1 != "") {
document.getElementById("pole1").value += text1 + "\n";
pole2.value = "";
pole2.focus();
}
else {
window.alert("Поле не заполнено!");
pole2.focus();
}
}
function f_press(e) {
e = e || window.event;
if (e.keyCode==13) {
f_click();
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
}
//->
</script>
</head>
<body>
<form action="test.php" method="GET" name="frm" id="frm" onsubmit="return f_submit();">
<div>
Слово:<br>
<input type="text" name="pole2" id="pole2" onkeypress="f_press(event);"><br>
<textarea name="pole1" id="pole1" cols="15" rows="10"></textarea>
<br><input type="button" value="Добавить слово" onclick="return f_click();"><br>
<input type="submit" value=" Значение поля ">
</div>
</form>
</body>
</html>
Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)
Похожие посты:
- Оценка «любви» поисковой системы Google с помощью сервиса Google Analytics (0)
- CSS: основы основ (0)
- Создание блока с закругленными краями (0)
- Изменение расположения элементов макета на противоположное, чтобы меню было справа (0)
- Создание макета с тремя колонками средствами CSS (0)
- Добавление к «резиновому» макету нижнего блока (0)
- Выделение текста на странице (0)