带有删除的input框

最新推荐文章于 2023-05-04 20:34:12 发布

放飞放放风

最新推荐文章于 2023-05-04 20:34:12 发布

阅读量545

点赞数

分类专栏： JS小功能

本文链接：https://blog.csdn.net/what_happen_to_you/article/details/109726037

版权

JS小功能专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述

代码

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>

    <!-- js引入 -->
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
    <style type="text/css">

        .round {   /*大span*/
            background: #fff none repeat scroll 0 0;
            border: 1px solid #bbb;
            display: inline-block;
            height: 28px;
            margin-right: 2px;
            vertical-align: top;
            width: 175px;
            position: relative;
        }
        .delquery {   /*清除图标*/
            background-position: 0 -320px;
            cursor: pointer;
            height: 20px;
            margin: 4px 0px 0 0;
            position: absolute;
            right: 0;
            top: 0;
            width: 20px;

        }
        .input_key { /*input框*/
            background: #fff none repeat scroll 0 0;
            border: 0 none;
            border-radius: 0;
            font: 16px/22px arial;
            height: 18px;
            margin: 5px 0 0 5px;
            outline: 0 none;
            padding: 0;
            width: 140px;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<h1>监听_input值的变化</h1>

<table>
    <tr>
        <td>
            <span class="round" id="suggest-align">
                <input type="text" autocomplete="off" maxlength="100" value="" class="input_key" tabindex="1" name="q" id="keyword">
                <span title="清空" class="delquery" id="clear" style="display: none;">x</span>
            </span>
        </td>
    </tr>
</table>

</body>

<script type="text/javascript">
    $("#clear").click(function(){
        $(".input_key").val("");
        $(".input_key").focus();
        $(this).hide();
    })
    $("#keyword").keydown(function(){
        if ($(".input_key").val().trim()!="") {
            $("#clear").show();
        }
    });
    $("#keyword").keyup(function(){
        if ($(".input_key").val().trim()!="") {
            $("#clear").show();
        }
    });



</script>
</html>

放飞放放风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
带有删除的input框

效果图代码<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title>  <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1
复制链接

扫一扫