认识input输⼊框的placeholder属性
我们来认识下input输⼊框的placeholder属性。
placeholder 属性提供可描述输⼊字段预期值的提⽰信息。(placeholder 属性适⽤于以下的 <input> 类型：text, search, url, telephone, email 以及password)
该提⽰会在输⼊字段为空时显⽰，并会在字段获得焦点时消失（IE10+获取焦点消失，Chrome，FF等在输⼊有值时消失）。
IE10+，Chrome，Firefox，Safari⽀持placeholder属性（IE6/7/8/9不⽀持）。　
在页⾯显⽰类似：
html代码：
为了让IE6/7/8/9⽀持placeholder属性，我说说⾃⼰解决⽅法。
⾸先判断浏览器是否⽀持placeholder属性。
var isSupport = function(){
return 'placeholder' ateElement('input');
}
input绑定onblur事件  如果不⽀持，其中分两种情况:
  如果是密码框(type="password")，就创建⼀个类似的input标签并且设置(type="text")，把原来有placeholder属性的input标签隐藏，并且把placeholder的值赋给新建的input标签，最后把新建的input标签插⼊到原来的input标签后⾯。
pe == 'password'){
var newInput = ateElement('input');
newInput.value = input.placeholder;
input.style.display = none;
input.parentNode.insertBefore(Sibling);
}
  如果是⼀般⽂本框(type="text")或者其他类型 search, url, telephone, email，就设置input的值等于placeholder属性的值。
pe == 'text'){
input.value = input.placeholder;
}
然后是获得焦点时：
  密码框类型是新建input标签获得焦点，隐藏新建input标签，显⽰原来的密码框。
newInput.style.display = 'none';
input.style.display = '';
input.focus();
}
  其他类型获得焦点，清空设置的value值。
if(input.value == input.placeholder) input.value = '';
}
最后是失去焦点时：
  密码框类型是判断原有的input失去焦点，如果有⽤户输⼊的值，不做任何改变，如果没有就隐藏，然后显⽰新建的input标签。
if(input.value == ''){
newInput.style.display = '';
input.style.display = 'none';
}
}
  其他类型失去焦点判断⽤户是否有输⼊的值，如果没有，就设置value值为placeholder的值，如果有就不做任何改变。
if(input.value == '') input.value = input.placeholder;
}
总的来说分两块处理，密码类型和⾮密码类型。
为了⽅便，兼容各⼤浏览器，⼀般要封装成⼀个插件，下⾯是我的⼀个封装，供参考。
/**
* LBS PlaceHolder
* ============================================
* 直接调⽤:
* PlaceHolder.init() //页⾯所有input
* ate(input) //单个或多个input
* ============================================
* PlaceHolder.className
* 为显⽰占位⽂本input添加类名默认placeholder
* ============================================
**/
;(function(){
var PlaceHolder = {
_support: (function(){
return 'placeholder' ateElement('input');
})(),
className: 'placeholder',
init: function(){
if(!PlaceHolder._support){
var inputs = ElementsByTagName('input');
}
},
create: function(inputs){
if(PlaceHolder._support) return;
var input = null, i = 0, n = inputs.length, holds = [];
if(!n) inputs = [inputs];
for(; i < n; i++) holds[i] = inputs[i];
for(i = 0; i < n; i++){
input = holds[i];
if(PlaceHolder.attr(input,'placeholder') !== '' && PlaceHolder.attr(input,'placeholder') !== null){            pe == 'password'){
var newInput = ateElement('input');
newInput.className = input.className + ' ' + PlaceHolder.className;
newInput.value = PlaceHolder.attr(input,'placeholder');
PlaceHolder.after(newInput,input);
input.style.display = 'none';
PlaceHolder._newInputBind(input,newInput);
}else{
PlaceHolder._setValue(input);
PlaceHolder._inputBind(input);
}
}
}
},
_newInputBind: function(input,newInput){
<(newInput,'focus', function(){
newInput.style.display = 'none';
input.style.display = '';
input.focus();
});
<(input,'focus', function(){
newInput.style.display = 'none';
input.style.display = '';
input.select();
});
<(input,'blur', function(){
if(input.value === ''){
newInput.style.display = '';
input.style.display = 'none';
}
});
},
_inputBind: function(input){
<(input,'focus',function(){
if(input.value === PlaceHolder.attr(input,'placeholder')){
input.value = '';
input.select();
}
});
<(input,'blur',function(){
if(input.value === '') PlaceHolder._setValue(input);
});
},
_setValue: function(input){
input.value = PlaceHolder.attr(input,'placeholder');
PlaceHolder.addClass(input,PlaceHolder.className);
},
on: function(el,type,fn){
if(el.addEventListener) el.addEventListener(type, fn, false);
else el.attachEvent('on' + type, function(){return fn.call(el,event)});
},
hasClass: function (o,c){
return -1 < (' '+ o.className +' ').indexOf(' '+ c +' ');
},
addClass: function(o,c){
if(!PlaceHolder.hasClass(o,c)) o.className += ' '+ c;
},
removeClass: function(o,c){
if(PlaceHolder.hasClass(o,c)){
var reg = new RegExp('(\\s|^)'+ c +'(\\s|$)');
o.className = place(reg,'');
}
},
attr: function(o,v){
return o.v || o.getAttribute(v);
},
after: function(n,o){

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。