html 输入框显示“小叉叉”的清空图标
来源:互联网 发布:云计算分类 编辑:程序博客网 时间:2024/06/10 02:42
输入框获取焦点时动态显示“叉叉”的清空图表:在输入框中输入内容时,右边显示“叉叉”按钮;输入框为空的时候,“叉叉”按钮消失。
主要难点是在获取焦点的同时获取输入内容:方法 1 和 2 是 google 到的,但兼容性不够;方法 3 是自己用 js 实现。
1. H5 type="search" 类型:
<input id="search" name="search" type="search"/> H5 input 标签的一个类型;不支持 H5 就 JJ 了。
2. css 实现:
<style type="text/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; }</style><input class="input" id="box_bak" required /><a href="javascript:;" class="clear" onclick="cssClear();" /><script type="text/javascript"> function cssClear() { alert("cssClear");}</script>
3. js 实现:
之前说了,在输入框获取焦点输入的时候,是获取不到输入值的。几近放弃的时候,惊喜发现,miniUI 提供了getInputText()、hsetInputText() 两个方法,就是解决在获取焦点时候不能获取输入值得问题。现在问题得以解决。
<style type="text/css">.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;}</style><input class="input" id="box_bak" required /><a href="javascript:;" class="clear"><script type="text/javascript">if(mini.get("inputId").getInputText() != "") { $("#clear").show();} else { $("#clear").hide();}</script>
附:貌似一些 UI 框架和 js 库也会提供 getInputText() 的方法,比如 Angular。原生 js 的话,暂且实在无能为力,难道要在事件中自己拼接字符串?
0 0
- html 输入框显示“小叉叉”的清空图标
- Android中控制点击EditText输入框右边清空图标的显示与隐藏.
- html之输入框嵌套小图标
- IE input X 去掉文本框的叉叉和密码输入框的眼睛图标
- 清除IE10下input的叉叉(X)和密码输入框的眼睛图标
- IE10+ input X 去掉文本框的叉叉和密码输入框的眼睛图标
- 输入框点击内容清空或显示的js代码
- JS自动生成动态HTML验证码页面,输入错误自动清空输入框
- ExtJs 实现快速清空输入框的值
- 清空页面控件的输入
- 清空输入缓冲区的方法
- 清空输入缓冲区的方法
- HTML属性placeholder,输入框为空时显示的内容
- HTML网页的浏览器标题栏显示小图标
- 怎么在HTML网页的浏览器标题栏显示小图标
- 清空页面输入框中值
- jquery清空textarea等输入框
- Android 清空输入框内容
- C++走向远洋——25(项目二,游戏类)
- TCP/IP HTTP-Header-消息报头的获取
- 有关bash的一些常识
- Python学习笔记 - 使用APScheduler管理定时任务
- POJ 3090 欧拉函数
- html 输入框显示“小叉叉”的清空图标
- Android初学习 - 声明和使用权限
- 【Lightoj】 1078-多少个可以整除
- Apache Cordova-Android框架原理研究笔记 I
- Myeclipse安装SVN插件
- 策略模式(java)
- Angularjs Directive 详解
- 用Spring的邮件封装类JavaMailSenderImpl发送邮件
- 【Android性能优化】Android图片加载方案--Bitmap的内存管理和优化方案