Добавляем...


Текстовые поля
Имеется три вида текстовых полей ввода: однострочные текстовые поля ввода, поля для ввода пароля и многострочные текстовые поля, называемые областями текста. Однострочные поля текста определяются с помощью <input type="text" />, тогда как поля для ввода пароля — с помощью <input type= "password" />. В традиционном HTML обе эти формы элемента <input> поддерживают одинаковые атрибуты, указанные ниже:

<input type="text или password"
name="уникальное буквенно-цифровое имя поля"
id= "уникальное буквенно-цифровое имя поля"
maxlength="максимальное число вводимых символов"
size="ширина видимой области ввода в символах"
value="значение по умолчанию для поля" />

Таблица. Дополнительные свойства и методы элементов input типа "text" и "password"
Свойство Описание
maxLength Максимальное число символов, которые можно ввести в поле
readOnly Логическое значение, указывающее возможность для пользователя модифицировать содержимое поля
select() Выделяет содержимое поля, например, при подготовке к замене или для копирования в буфер обмена

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
<title>Проверка текстовых полей</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
</head>
<body>
<h2 align="center">Фopмa для проверки</h2>
<form name="testform" id="testform" action="http://www.javascriptref.com" method="get">
<1аbе1>Поле текста 1:
<iput type="text" name="textl" id="textl" size="20" value="Исходное значение" /></label>
<br />
<1аbе1>Поле текста 2:
<iput type="text" name="text2" id="text2" size="20" maxlength="20" /></label>
<br />
<input type="button" value='Проверить значение" onclick="alert(document.testform.text1.value);" />

<input type="button" уа1ие="Установить значение" onclick="document.testform.textl.value =document.testform.text2.value;" />

<input type="button" value="Cдeлaть недоступным" onclick="document.testform.textl.disabled=!(document.testform.textl.disabled);" />

<input type="button" value="Cдeлaть только для чтения" onclick="document.testform.textl.readOnly=!(document.testform.textl.readOnly);" />

<input type="button" value="Передать фокус" onclick="document.testform.textl.focus();" />
<input type="button" value="Убрать фокус" onclick="document.testform.textl.blur();" />
<input type="button" value="Выделить" onclick="document.testform.textl.select();" />
</form>

<hr />
<h2 align="center">Общие свойства поля</h2>
<script type="text/javascript">
<!--
document.write("defaultValue: " + document.testform.textl.defaultValue+"<br />");
document.write("form: "+document.testform.textl.form+"<br />");
document.write("form.name: " + document.testform.textl.form.name+ "<br />");
document.write("name: "+document.testform.textl.name+"<br />");
document.write("type: "+document.testform.textl.type+"<br />");
document.write("value: "+document.testform.textl.value+"<br />");
//—>
</script> </body>
</html>


Области текста

Близкими к элементам ввода типа "text" являются дескрипторы <textarea>, создающие многострочные поля ввода текста. Основной синтаксис <textarea> таков:

<textarea
name="имя поля"
id="имя поля"
rows="число строк"
cols="число столбцов"
Текст по умолчанию для поля
</textarea>

Сгрого говоря, данный элемент не является элементом <input>, но при этом соответствующий объект HTMLTextAreaElement имеет все свойства и методы элементов ввода типа "text", а также дополнительные свойства, представленные в таблице. При этом, однако, этот объект не имеет свойства maxLength.

Таблица. Уникальные свойства объекта HTMLTextAreaElement
Свойство Описание
cols Ширина области ввода в символах
rows Высота области ввода в символах

Использование <textarea> в JavaScript аналогично использованию стандартных полей текста или полей для ввода пароля; основное отличие заключается в наличии указания строк и столбцов, изменяющих размеры области. Однако значение поля и defaultValue могут отличаться, поскольку <textarea> может возвращать символы, которые в JavaScript должны указываться с помощью управляющих кодов. Наконец, свойство type сообщает в данном случае textarea, а не text. Следующий простой пример демонстрирует основные возможности доступа к <textarea> в JavaScript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
<title>Проверка областей текста</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
</head>
<body>
<h2 align="center">Фopмa для проверки</h2>
<form name="testform" id="testform" action="http://www.javascriptref.com" method="get">
<1аbе1>0бласть текста 1:
<textarea name="fieldl" id="fieldl" rows="5" cols="40">
Некоторый текст, выводимый по умолчанию
</textareax/label>
<br /><br />

<input type="button" value="Проверить значение"
onclick="alert(document.testform.fieldl.value);" />

<input type="button" value="Установить значение"
onclick="document.testform.fieldl.value='Это \n\n\n\t\t проверка!';" />
<br />

<input type="button" value="Изменить число строк"
onclick="document.testform.fieldl.rows =document.testform.rowsField.value; "/>
<input type="text" name="rowsField" id="rowsField" value="2" size="2" maxlength="2" />
<br />

<input type="button" value="Изменить число столбцов" onclick="document.testform.fieldl.cols =document.testform.colsField.value;"/>
<input type="text" name="colsField" id="colsField" value="10" size="2" maxlength="2" />
<br />
</form>
<hr />
<h2 align="center">Общме свойства поля</h2>
<script type="text/javascript">
<!--
document.write("defaultValue: " + document.testform.fieldl.defaultValue+"<br />");
document.write("form: "+document.testform.fieldl.form+"<br />");
document.write("form.name: "+document.testform.fieldl.form.name+"<br />");
document.write("name: "+document.testform.fieldl.name+"<br />");
document.write("rows: "+document.testform.fieldl.rows+"<br />");
document.write("cols:"+document.testform.fieldl.cols+"<br />");
document.write("type: "+document.testform.fieldl.type+"<br />");
document.write("value: "+document.testform.fieldl.value+"<br />");
//-->
</script>
</body>
</html>

Важной особенностью дескриптора <textarea> является то, что он не обеспечи-вает простого способа установки максимального объема содержимого, допустимого для ввода в поле. Для браузеров, обеспечивающих поддержку основных событий, и частности onkeypress, можно ограничить объем ввода в поле следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
<title>Ограничение для области текста</title>
<meta http-equіv="content-type" content="text/html; charset=windows-1251" />
</head>
<body>
<form name="myform" id="myform" action="#" method="get">

<1аbе1>Комментарии:<br />
<textarea name="comments" id="comments" rows="4" cols="40"
onkeypress="return (document.myform.comments.value.length < 100);">
Задает ограничение объема в 100 символов в соответствующих браузерах.
</textarea>
</label>
</form>
</body>
</html>

Этот сценарий не будет работать во многих старых браузерах, потому что они не поддерживают обработку событий onkeypress. Ограничить бесконечную длину поля в таких случаях можно с помощью проверки длины значения свойства value при изменении содержимого поля (или в момент подачи запроса формы) с последующим уменьшением длины до заданного числа символов. Следующий пример иллюстрирует один из возможных подходов к решению этой проблемы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
<title>0граничение для области текста, вариант 2</title>
<meta http-equіv="content-type" content="text/html; charset=windows-1251" />
<script type="text/javascript">
<!--
function checkLimit (field, limit)
{
if (field.value, length > limit)
{
alert("Поле ограничено "+limit+" символами");
// Усечение до предела
var revertField = field.value.slice(0, limit-1);
field.value = revertField;
field.focus () ;
}
}
//-->
</script>
</head>
<body>
<form id="myform" name="myform" action="#" method="get">
<1аbеl>Комментарии:<br />
<textarea id="comments" name="comments" rows="8" cols="40" onchange="checkLimit(this, 100);"> Введите еще 10 символов для превышения предела в 100 символов, а затем щелкните вне области текста.
</textarea>
</label>
</form>
</body>
</html>

Замечание. Проблемой дескриптора <textarea> является то, что "заверстывание" текста не имеет стандартов, общих для всех браузеров. Нестандартный атрибут wrap допускает установку значений, слишком "мягких" для того, чтобы обеспечить перенос по словам в большинстве браузеров. Странно, но HTML 4.0 и D0M не пытаются решить эту проблему, хотя большинством объектных моделей JavaScript браузеров обеспечивается доступ к указанному свойству HTML. Если перенос по словам важен для приложения, вам придется решать проблему с учетом особенностей каждого браузера.
назад:
далее:


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика