jQuery实现搜索框文字内容可删除

以下代码中用到的知识有：

1、图标使用的是iconfont的图标库，若要了解其具体使用的方法，请查看博客--iconfont的使用方法；

2、jQuery的on()代理；

3、jQuery的keyup()方法：

　　定义：　　　

　　　　完整的 key press 过程分为两个部分，按键被按下，然后按键被松开并复位。

　　　　当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。

　　　　keyup() 方法触发 keyup 事件，或规定当发生 keyup 事件时运行的函数。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS实现搜索框文字可删除</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 搜索按钮使用iconfont的图标库 css引入 -->
<link rel="stylesheet" type="text/css" href="css/iconfont.css">
<style>
/*input框得到焦点时去掉边框*/
*:focus {
    outline: none; 
}
body {
    width: 400px;
    margin: 100px auto;
}
#topsearch {
    height: 33px;
}
#topsearch .input {
    border: 1px solid #77c03a;
    height: 100%;
}
#topsearch .input .clear {
    width: 30px;
    height: 35px;
    line-height: 30px;
    text-align: center;
    padding-right: 10px;
    visibility: hidden;
    opacity: 0.8;
    color: gray;
}
.clear{
    cursor: pointer;
}
#topsearch input[type=text] {
    height:20px;
    width: 250px;
    border: none;
    padding: 5px;
}
#topsearch div {
    float: left;
}
#topsearch button {
    width: 50px;
    height: 35px;
    background: #77c03a;
    color: #fff;
    border: none;
}
</style>
</head>
<body>
<div id="topsearch">
    <div class="input">
        <input type="text" id="search">
        <span class="clear iconfont icon-clear" id="delete"></span>
    </div>
    <button type="button" name="search" class="iconfont icon-i-search"></button>    
</div>
<script>
    // jQuery写法  推荐
    $(function(){
        $('#topsearch').on('keyup', '#search', function() {
            if ($(this).val().length>0) {
                $("#delete").css('visibility', 'visible');
                $('#delete').click(function() {
                    $('#search').val('');
                    $("#delete").css('visibility', 'hidden');
                });
            }else{
                $("#delete").css('visibility', 'hidden');
            }
        });
    })
</script>
</body>
</html>

效果图如下：

jQuery实现搜索框文字内容可删除

推荐阅读