HTML5搜索框清除功能有五种实现方法：一、用type=”search”配合::webkit-search-cancel-button伪元素；二、手动添加自定义按钮并定位；三、动态监听input/focus/blur事件控制显隐；四、封装为Web Components复用；五、适配移动端touchstart和keydown事件。
“) no-repeat center;
border: none;
background-color: transparent;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s;
}
input:focus + button, input:not(:placeholder-shown) + button { opacity: 1; }
`;
const input = this.shadowRoot.querySelector(‘input’);
const btn = this.shadowRoot.querySelector(‘button’);
btn.addEventListener(‘click’, () => {
input.value = ”;
input.focus();
});
}
}
customElements.define(‘clearable-search’, ClearableSearch);
2、在HTML中直接使用自定义标签：
3、通过JavaScript访问其内部输入框值：
const customEl = document.querySelector(‘clearable-search’);
const inputInside = customEl.shadowRoot.querySelector(‘input’);
注意：shadowRoot内容不可被外部CSS直接选中，需通过:host或::part()机制暴露样式钩子
五、处理移动端软键盘回车键触发清除逻辑
在iOS和Android设备上，用户可能通过软键盘的“搜索”或“完成”按钮提交，也可通过长按输入框呼出上下文菜单中的“清除”选项。需监听keydown事件捕获Enter键并执行清除动作。
1、为搜索框添加keydown事件监听器：
document.getElementById(‘mobileSearch’).addEventListener(‘keydown’, function(e) {
if (e.key === ‘Enter’ && e.target.value.trim() !== ”) {
e.preventDefault();
此处可执行搜索提交逻辑
}
});
2、为清除按钮补充touchstart事件以提升移动端响应速度：
document.getElementById(‘mobileClear’).addEventListener(‘touchstart’, function(e) {
e.preventDefault();
this.closest(‘.search-wrapper’).querySelector(‘input’).value = ”;
});
3、禁用移动端默认的上下文菜单清除项干扰：
document.getElementById(‘mobileSearch’).addEventListener(‘contextmenu’, function(e) {
if (e.target.value.trim() === ”) {
e.preventDefault();
}
});
以上就是html5如何给搜索框加清除历史按钮_html5清除按钮与事件绑定【攻略】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1607140.html
微信扫一扫 
支付宝扫一扫 
