欢迎使用优快云-markdown编辑器

最新推荐文章于 2021-01-07 23:01:28 发布

Follow-My-Heart

最新推荐文章于 2021-01-07 23:01:28 发布

阅读量188

点赞数

CC 4.0 BY-SA版权

分类专栏： javasript 文章标签： input键盘绑定事

本文链接：https://blog.youkuaiyun.com/qq_26422747/article/details/68944568

javasript 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何使用三种事件(keypress、keydown、keyup)监听输入框内容变化，并通过一个具体示例展示了如何根据输入框内容的变化来控制搜索框中图标显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例如我们在输入框输入文字时，如何监听input输入框内容的变化，然后根据内容的变化，我们去触发相应的事件。这个时候我们就应该给输入框input绑定三个事件，keypress，keydown，keyup。下面我将写一个demo来模仿搜索输入框中的差号的显示与隐藏。
style部分

body{
            width: 100%;
            height: 100%;
        }
        .input{
            position: relative;
            width: 300px;
            height: 30px;

        }
            input{
                width: 300px;
                height: 30px;
                border: none;
                outline: none;
                -webkit-appearance: none;
                border: 1px solid red;
            }
            .cicle{
                display: inline-block;
                width: 20px;
                height: 20px;
                background: black;
                border-radius: 10px;
                position: absolute;
                right: 10px;
                top: 5px;
                display: none;
            }

html部分
<div class="input">
        <input name="" rows="" cols="" id="text-area"placeholder="请输入文字"></input>
        <span class="cicle"></span>
</div>

script部分
js原生绑定事件



window.onload = function() {

                            document.getElementById("text-area").addEventListener('keypress', function() {
                                calfontCount();
                            }, false);

                            document.getElementById("text-area").addEventListener('keydown', function() {
                                calfontCount();
                            }, false);

                            document.getElementById("text-area").addEventListener('keyup', function() {
                                calfontCount();
                            }, false);
                        }

jq写法

$(function() {
        $("#text-area").bind("keypress", function() {
            calfontCount();
        });
        $("#text-area").bind("keydown", function() {
            calfontCount();
        });
        $("#text-area").bind("keyup", function() {
            calfontCount();
        });
    })
    用到的方法
    function calfontCount() {
        var textSpan = document.getElementById("textSpan");
        var textArea = document.getElementById("text-area");
        var cur = textArea.value.replace(/\s/g, '').length; //当前文字个数
        if(cur > 0) {
            $(".cicle").show();
        } else {
            $(".cicle").hide();
        }
    }
    效果展示
    ![没有文字时](https://img-blog.youkuaiyun.com/20170401145221926?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjY0MjI3NDc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)![有内容时](https://img-blog.youkuaiyun.com/20170401145302413?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjY0MjI3NDc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)