应用：输入框清除按钮

作者: Dxes | 来源:发表于2019-12-16 19:31 被阅读0次

应用：输入框清除按钮
Android输入框中加入清除按钮
html输入框中删除按钮输入出现，不输入隐藏交互实现
02表单《移动应用UI设计模式（第2版）》交互设计读书笔记
UITextField输入框部分常用属性
第一次作业第二题
2018-08-14 HTML5学习表单基本使用
CSS 如何清除输入框（input）在IE浏览器中自带的清除按钮
Tailwind Component
2018-10-17乘法计算器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <style type="text/css">
            #box{
                border: 1px solid lightgray;
                width: 250px;
                height: 40px;
                /*line-height: 40px;*/
            }
            
            #box>img{
                width: 40px;
                height: 40px;
                border-right: 1px solid lightgray;
            }
            
            #box>input{
                border: 0;
                outline:0;
                height: 38px;
                width: 150px;
                vertical-align: top;
                /*background-color: chartreuse;*/
                
            }
            
            #box>font{
                float: right;
                height: 40px;
                line-height: 40px;
                margin-right: 10px;
                
                color: lightgray;
                font-size: 20px;
                display: none;
                
                cursor: pointer;
            }
            
        </style>
    </head>
    <body>
        <div id="box">
            <img src="img/username.png"/>
            <input  placeholder="请输入账号"/>
            <font>×</font>
        </div>
        
        <script type="text/javascript">
            $('#box>input').on('keyup',function(){
                if($(this).val().length == 0){
                    $('#box>font').css('display', 'none')
                }else{
                    $('#box>font').css('display', 'inline')
                }
            })
            
            $('#box>font').on('click', function(){
                $('#box>input').val('')
                $('#box>font').css('display', 'none')
            })
            
        </script>
    </body>
</html>