Все что я хочу - подключить некий magicPlaceholder.js и забыть об этом.
Далее работать как обычно - из js обращаться к input.value, менять input.placeholder (в принципе), в том числе и через атрибуты. Причем с динамически созданными инпутами все также должно работать. В IE9 по крайней мере это все реализуемо. Уже почти сделал. В IE8 возможно тоже, но будут некоторые ограничения. |
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta charset="utf-8">
<style>
#canvas {
border: solid black 1px;
display: block;
}
</style>
<body>
<input type="text" placeholder="dasda">
<input type="text" placeholder="dasda" >
<input type="text" placeholder="dasda" >
<script>
[JS]
function addevent(obj, e, h) {if (obj.addEventListener) { obj.addEventListener(e, h, false);} else if (obj.attachEvent) { obj.attachEvent('on'+e, h);} else { obj['on'+e]=function() { h();};}} function delevent(obj, e, h) { if (obj.removeEventListener) { obj.removeEventListener(e, h, false);} else if (obj.detachEvent) { obj.detachEvent('on'+e, h);} else {obj['on'+e]=null;}}
var fn = function(){
var inp = document.querySelectorAll('input[type="text"');
for(var i = 0; i < inp.length; i++) {
inp[i].setAttribute('data-pl', inp[i].getAttribute('placeholder'));
inp[i].value = inp[i].getAttribute('placeholder');
}
var o = {
focus: function (e) {
e = e.target || e.srcElement;
if(!e.type == 'text') return;
if(e.value == e.getAttribute('data-pl')) {
e.value = '';
e.style.color = 'black'
}
addevent(e, 'blur', o.blur);
},
blur: function (e) {
e = e.target || e.srcElement;
if(e.value === '' || e.value == ' ') {
e.value = e.getAttribute('data-pl');
e.style.color = 'silver';
}
delevent(e, 'blur', o.blur);
},
createPlaceholder: function (place) {
var input = document.createElement('input');
input.type = 'text';
if('placeholder' in document.createElement('input') input.placeholder = place;
else input.setAttribute('data-bl', plc);
return input;
},
event: function () {
if('placeholder' in document.createElement('input')) return;
addevent(document.body, 'click', o.focus);
addevent(document.body, 'blur', o.blur);
}
}
o.event();
return o;
};
var fn1 = fn()
console.log(fn1)
[/JS]
</script>
</html>
через createPlaceholder можно создавать смело input. |
у меня работает ie8+
|
caetus, ты не правильно понял.
В общем, вроде бы работает: http://learn.javascript.ru/play/rc5dBb Работает в IE8-9 и в последнем Firefox'е (отключил проверку для теста), надеюсь в старых версиях тоже получится. Пока не решил проблему с автозаполнением браузера по F5. |
Короче, все удалось с таким старьем как Firefox 3.6 и Opera 10.6.
В webkit-based браузерах облом - в них фэйковые дескрипторы нативных свойств DOM-элементов. Автозаполнение тоже победил. Чуть поправлю код и залью на гитхаб. Правда опоздал я на пару годков с этой темой)) |
| Часовой пояс GMT +3, время: 10:58. |