html文本框中有一个叉号标志,html 输入框显示“小叉叉”的清空图标

输入框获取焦点时动态显示“叉叉”的清空图表：在输入框中输入内容时，右边显示“叉叉”按钮；输入框为空的时候，“叉叉”按钮消失。

主要难点是在获取焦点的同时获取输入内容：方法 1 和 2 是 google 到的，但兼容性不够；方法 3 是自己用 js 实现。

1. H5 type="search" 类型：

H5 input 标签的一个类型；不支持 H5 就 JJ 了。

2. css 实现：

.input { padding: 5px; margin: 0; border: 1px solid #beceeb; }

.clear { display: none; position: absolute; width: 16px; height: 16px; margin: 6px 0 0 -20px; background: url(a.png) no-repeat; outline: none; }

.input::-ms-clear { display: none; }

.input:valid + .clear { display: inline; }

function cssClear() {

alert("cssClear");

}

3. js 实现：

之前说了，在输入框获取焦点输入的时候，是获取不到输入值的。几近放弃的时候，惊喜发现，miniUI 提供了getInputText()、hsetInputText()两个方法，就是解决在获取焦点时候不能获取输入值得问题。现在问题得以解决。

.clear {display: none;position: absolute;width: 16px;height: 16px;margin: 4px 0 0 -22px;background:url(/dqy/swsj/images/fzz/clear.png) no-repeat;outline: none;}

if(mini.get("inputId").getInputText() != "") {

$("#clear").show();

} else {

$("#clear").hide();

}

附：貌似一些 UI 框架和 js 库也会提供 getInputText() 的方法，比如 Angular。原生 js 的话，暂且实在无能为力，难道要在事件中自己拼接字符串？

总结

以上是生活随笔为你收集整理的html文本框中有一个叉号标志,html 输入框显示“小叉叉”的清空图标的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。