Иногда поля ввода имени пользователя и пароля размещаются таким образом, что нет места для описания того, для чего предназначены такие поля. На помощь приходит маска текстового поля.
При неактивности поля в нём будет отображён произвольный текст. При активации поля текст будет удалён.
Ввод: elementid - текстовый элемент, к которому следует применить маску masktext - текст маски
Функция:
function CreateTextMask(elementid, masktext)
{
var element = document.getElementById(elementid);
element.value = masktext;
element.onfocus = function()
{
if (element.value == masktext)
{
element.className = "maskable-false";
element.value = "";
}
}
element.onblur = function()
{
if (element.value.length == 0)
{
element.className = "maskable-true";
element.value = masktext;
}
}
}
Стиль для маски:
.maskable-true
{
border:solid 1px #ddd;
width:300px;
color:#aaa;
}
.maskable-false
{
border:solid 1px #ddd;
width:300px;
color:#222;
}
<html>
<head>
<title>Маска текстового поля</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/* Стиль маски */
</style>
<script type="text/javascript" language="Javascript">
//Код функции маски
</script>
</head>
<body>
<form>
<input class="maskable-true" type="text" id="LOGIN" />
<input class="maskable-true" type="text" id="PASSWORD" />
</form>
<script type="text/javascript" language="Javascript">
CreateTextMask("LOGIN","Введите имя пользователя");
CreateTextMask("PASSWORD","Введите пароль");
</script>
</body>
</html>
