美文网首页
输入框的删除交互

输入框的删除交互

作者: 一二三言 | 来源:发表于2018-07-03 17:39 被阅读48次

    现在App搜索、用户名密码输入框都会有这样一个功能,输入数据后,后面会有一个可供删除的交互设计。如下图:


    1.png

    先看看需求是什么?
    1.没有数据时,点击后,删除按钮不出现;点击后输入\修改数据,删除按钮出现
    2.点击删除按钮清空数据后,删除按钮消失
    3.手动删除数据至为空时,删除按钮从出现到消失
    4.不再输入数据时(失去焦点),删除按钮消失
    1)先考虑用jquery来实现
    分析上面的需求,涉及到focus、click、input propertychange监听事件,假设我们现在要实现一个登录功能,有用户名和密码的输入框,如下:


    2.png

    <div class="input_boxs">
    <input type="text" class="username" id="username" placeholder="请输入用户名">
    <img class="deleteImg" id="deleteImg" src="delete.png">
    </div>
    上面div分别就是用户名的输入框(密码输入效果类似,不再重复;样式代码省略)
    1.首先实现没有数据时,点击后,删除按钮不出现;点击后输入\修改数据,删除按钮出现
    使用focus事件:


    3.png

    2.点击删除按钮清空数据后,删除按钮消失
    对删除按钮使用click事件:


    4.png

    3.手动删除数据至为空时,删除按钮从出现到消失
    对输入框进行input propertychange事件监听:


    5.png

    4.不再输入数据时(失去焦点),删除按钮消失


    6.png

    注:这个时候不能使用blur事件,否则在点击删除按钮之前就会触发这个方法,导致按钮隐藏无法触发click清空内容。
    2)还有一种方法,是使用css+js共同来控制的
    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(clear.png) no-repeat; outline: none; }
    .input:valid + .clear { display: inline; }
    HTML代码:
    输入任意内容:<input class="input" required><a href="javascript:" class="clear"></a>
    在输入数据的时候自动会出现删除按钮的图片,然后再给a标签加入click的监听事件就能清除数据了。
    该方法来自 https://www.zhangxinxu.com/wordpress/2014/03/css-input-clear-button-show-hide/,学习学习!

    相关文章

      网友评论

          本文标题:输入框的删除交互

          本文链接:https://www.haomeiwen.com/subject/gxzihxtx.html