使input date支持placeholder方法

input type date 的 placeholder 支持性有一定问题,因为浏览器会针对此类型 input 增加 datepicker 模块,看上去没那么必要支持 placeholder。

对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式,iOS 上会有 datepicker 不会显示 placeholder 文字,但是为了统一表单外观,往往需要显示。Android 部分机型没有 datepicker 也不会显示 placeholder 文字。

 

解决方法:

css:

input.show_placeholder:before{ content: attr(placeholder);}

html:

js:

$('#date').blur(function(){
	var obj = $(this);
	if(!obj.val()){
		$(this).addClass('show_placeholder');
	}else{
		$(this).removeClass('show_placeholder');
	}
});
$('#date').focus(function(){
	$(this).removeClass('show_placeholder');
})

 

你可能感兴趣的:(HTML,+,CSS,+,JS,HTML5)