在HTML5中,input新增了date的类型
如果我们想实现placeholder的显示,不可以直接设置placeholder属性
要想实现以下样式
点击前
点击后
可以采用事件绑定addEventListener和事件解绑removeEventListener来实现,代码如下:
<input type="text" id="inputDate" placeholder="请输入日期">
var inputDate = document.querySelector("#inputDate");
var changeType = function(){
this.type = "date";
console.log(this);
}
var removeEvent = function(){
console.log(this);
if(this.focus){
this.removeEventListener("focus",changeType);
this.removeEventListener("blur",removeEvent)
}
}
inputDate.addEventListener("focus",changeType);
inputDate.addEventListener("blur",removeEvent);
将解绑事件写入绑定的事件中,便可实现第一次点击前出现提示信息的效果了