【前言】
自从html5引入placeholder后,问题就来了,
不支持html5的浏览器也先有这样的效果,
各种兼容,之前考虑,今天测试人员逮住不放,
想了个解决办法,看样子还行,记录一下。
【原理】
不使用placeholder,而是模拟placeholder的效果,
大概就是用focus和focusout效果。
【代码】
<script>
$(function(){
$('input.holder').each(function(){
var $this = $(this);
var holder = $this.data('holder');
if(holder){
$this.css('color','#afafaf').val(holder);
}
});
$(document)
.off('focus', 'input.holder')
.on('focus', 'input.holder',function(){
var $this = $(this);
if($this.val() === $this.data('holder')){
$this.css('color','black').val('');
}
});
$(document)
.off('focusout', 'input.holder')
.on('focusout', 'input.holder',function(){
var $this = $(this);
if($.trim($this.val()) === ''){
$this.css('color','#afafaf').val($this.data('holder'));
}
});
});
</script>
【注意】
input需要添加class="holder"和data-holder="内容"