Тема: JS: Placeholder
Вы наверняка видели поля ввода в которых подсказка написана прямо внутри их и исчезает при вводе первой буквы.
Удобная вещь! Наглядно, удобно, экономит место. В современных браузерах поддерживается с помощью атрибута placeholder тега <INPUT>.
Как быть с теми браузерами, которые этот атрибут не поддерживают? Мне, например, он позарез понадобился в HTA.
Гугл выдаёт монстроидальные варианты на jQuery + placeholder.js. Нашел лишь несколько простых реализаций, но с весьма урезанным функционалом. Решил написать сам. Работает точь-в-точь как "фирменный".
<!DOCTYPE html>
<html>
<head>
<hta:application />
<style type="text/css">
.plh {
position: absolute;
left: 4px;
top: 2px;
color:graytext;
}
</style>
<script type="text/javascript">
function setPlaceHolders(){
var input = document.getElementsByTagName('input');
if (input) {
var plh, container;
for(var i = 0, inp; inp = input[i++];) {
if ((inp.type == 'text')||(inp.type == 'password')){
var txt = inp.getAttribute("placeholder");
if (txt && (txt.length > 0)) {
plh = document.createElement("DIV");
plh.className = "plh";
plh.innerHTML = txt;
if (inp.value.length>0) plh.style.display = 'none'; // вариант с скрытием подсказки
// if (inp.value.length>0) plh.style.top = '-18px'; // вариант с подъёмом подсказки
plh.onfocus = function(){this.previousSibling.focus();};
container = document.createElement("SPAN");
container.style.position = 'relative';
inp.parentElement.insertBefore(container, inp);
container.appendChild(inp);
container.appendChild(plh);
inp.attachEvent('onkeyup', function(elem){
return function(){elem.nextSibling.style.display = elem.value.length ? 'none' : '';}; // вариант с скрытием подсказки
// return function(){elem.nextSibling.style.top = elem.value.length ? '-18px' : '2px';}; // вариант с подъёмом подсказки
}(inp)
);
/* Для перетаскивания данных на поля ввода (c) wisgest */
container.ondragover = function () {
event.dataTransfer.dropEffect = event.ctrlKey ? 'copy' : 'move';
return event.srcElement.tagName == "INPUT";
};
container.ondrop = function () {
if (this.ondragover()) return;
var inp = this.firstChild;
inp.value = event.dataTransfer.getData('text');
inp.nextSibling.style.display = 'none'; // вариант с скрытием подсказки
// inp.nextSibling.style.top = '-18px'; // вариант с подъёмом подсказки
};
}
}
}
}
}
</script>
</head>
<body onload="setPlaceHolders();">
<br />
<input type="text" placeholder="Domain" value="Home"><br /><br />
<input type="text" placeholder="User Name" onkeyup="idLen.innerHTML=this.value.length;"> <span id="idLen">0</span><br /><br />
<input type="password" placeholder="Password"><br /><br />
</body>
</html>
