10
09/2014
跨浏览器 Placeholder
<script>
var doc = document,
inputs = doc.getElementsByTagName('input'),
supportPlaceholder = 'placeholder' in doc.createElement('input'),
placeholder = function(input){
var text = input.getAttribute('placeholder'),
defaultValue = input.defaultValue;
input.value = text;
input.onfocus = function(){
if(input.value === defaultValue || input.value === text){
this.value = '';
}
}
input.onblur = function(){
if(input.value === ''){
this.value = text;
}
}
};
if(!supportPlaceholder){
for(var i = 0, len = inputs.length; i < len; i++){
var input = inputs[i], text = input.getAttribute('placeholder');
if(input.type === 'text' && text){
placeholder(input);
}
}
}
</script>
学习笔记:
- 连续 var
- 检测浏览器支持 supportPlaceholder = ‘placeholder’ in doc.createElement(‘input’)
但是如果有 默认值的话,似乎有 bug。一旦获得焦点,defaultValue 就被强制换成 placeholder 了,改了一个版本(为了方便chrome调试,placeholder -> placeholder2 了;用的时候改回来)
<input placeholder2="123" value="88888" />
<script>
var doc = document,
inputs = doc.getElementsByTagName('input'),
supportPlaceholder = 'placeholder2' in doc.createElement('input'),
placeholder = function(input){
var text = input.getAttribute('placeholder2'),
defaultValue = input.defaultValue;
if(!defaultValue){
input.value = text;
}
input.onfocus = function(){
if( input.value === text){
this.value = '';
}
}
input.onblur = function(){
if(input.value === ''){
this.value = text;
}
}
};
if(!supportPlaceholder){
for(var i = 0, len = inputs.length; i < len; i++){
var input = inputs[i], text = input.getAttribute('placeholder2');
if(input.type === 'text' && text){
placeholder(input);
}
}
}
</script>