html 输入框显示“小叉叉”的清空图标

learn 专栏收录该内容
8 篇文章 0 订阅

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

  2222.png 

主要难点是在获取焦点的同时获取输入内容:方法 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" οnclick="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 的话,暂且实在无能为力,难道要在事件中自己拼接字符串? 

  • 4
    点赞
  • 5
    评论
  • 9
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏作者

小土為尘

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值