《Input 常见Bug 及解决方法》

2019-01-20 09:12:54 377 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

IE浏览器input输入框自动触发input事件和focus也触发input事件的bug 问题 windows系统IE11、10 在页面输入框上同时绑定了nput以及foucs事件，当触发foucs事件的时候会触发input事件，导致我的第一次搜索无效。暂时解决办法只有当输入框上存在placeholder的情况下才会出现如此问题，因此项目中如果不是特别依赖placeholder可以将其暂时去掉。另外如果想要实现placeholder效果，可以使用另外的方式实现。 ... 阅读详情

开发工具与关键技术：DW 与 Input 标签常见bug及解决方法
作者：何石涛
撰写时间：2019 年 1 月 17 日
一、讲述内容：
1. $目标完成效果：

点击input框后：

2.利用DW完成目标效果
（1）HTML部分
<div class="rightseach">
<form action="">
<input type="text" id="text">
<div id="weinei">
<a href="#">HTML</a>
<a href="#">修复input</a>
</div>
<div class="seach">
</div>
</form>
</div>
（2） CSS部分
<style>
.rightseach{
float: right: ;
line-height: 35px;
papadding-left: 130px;
}
.rightseach form{
width: 290px;
height: 30px;
background: #f5f5f5;
border-radius: 10px;
}
.seach{
width: 30px;
height: 30px;
background: #656565 url(./../华为商城（VMALL.COM）_华为手机、荣耀手机、官网正品保障_files/search.png) 7px 6px no-repeat;
border-radius: 50%;
position: relative;
margin-left: 260px;
}
#weinei{
font-size: 10px;
position: absolute;
top: 7px;
left: 160px;
}
#weinei a{
color: #dc102b;
padding-right: 15px;
text-decoration: none;
}
.rightseach input{
/*outline: 0;*/
height: 26px;
width: 280px;
position: absolute;
top: 10px;
background: #f5f5f5;
border: 0;
</style>
（3）js部分
<script>
window.onload = function(){
var weinei = document.getElementById("weinei");
text.onclick = function(){
weinei.style.display = "none";
};
};
</script>
到这就已经全部完成了。
二、刷新网页后得到：