jquery input内容改变时触发事件（实现qq邮箱：写邮件的界面）

最新推荐文章于 2023-01-16 10:28:09 发布

林不羁

最新推荐文章于 2023-01-16 10:28:09 发布

阅读量383

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css HTML JavaScript 文章标签： css html jquery

本文链接：https://blog.youkuaiyun.com/qq_36337754/article/details/97374080

JavaScript 同时被 3 个专栏收录

40 篇文章

订阅专栏

css

11 篇文章

订阅专栏

HTML

10 篇文章

订阅专栏

本文介绍了一种使用jQuery监听输入框内容变化的方法，当输入框内容非空时，发送按钮变为可点击状态并可执行跳转；若内容为空，则按钮呈透明状态且不可点击。通过简单的代码实现输入验证与UI反馈。

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

效果：
input内容不为空时，发送按钮颜色不透明，并且点击后可以执行跳转
内容为空时，发送按钮颜色透明，点击后无反应
在这里插入图片描述

主要代码如下：需要引用jquery
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>可以引用菜鸟教程编辑器里的jquery，也可以自己自行下载

<div class="msg-nav" >
      <a href="MyMsg.aspx"  class="back" >取消 </a>
      <h3>写邮件</h3>
       <a href="SendMsg.aspx" class="send not-active" id="send" onclick="return false">发送</a>
</div>
<div class="panel-body">
     <ul >
          <li><span class="textdes">收件人:</span>
              <input name="info" type="text" id="accept"  style="width:100%;" autofocus="autofocus"/>
           </li>
     </ul>
</div>

<style>
		ul {
            padding: 0px;
        }
        input{
            margin-bottom:0 !important;
            display:inline-block;
            width:auto!important;
            border:none!important;
        }
        li{
            border:1px solid #ddd !important;
        }
        
        .textdes{
            display:inline-block;
            margin-left: 10px;
        }
         .back{
            float:left;
            margin-left:20px;
        }
        h3{
            text-align:center;
            display:inline-block;
            position:absolute;
            left:36%;
            line-height:50px;
            height:50px;
        }
        .msg-nav{
            height:50px;
            width:100%;
            line-height:50px;
            font-size:16px;
        }
        .send{
            float:right;
            margin-right:20px;
        }
        .not-active{
            color:rgba(101, 206, 167, 0.38);
        }
        .not-active a:active,a:hover{
            color:rgba(101, 206, 167, 0.38)!important;
        }
        

    </style>

<script>
        $("#accept").bind("input propertychange", function () {
            var accept = $(this).val();
            if (accept !== null && accept !== "") {
                $("#send").removeClass("not-active");
                $("#send").removeAttr("onclick");
            }
            else {
                $("#send").addClass("not-active");
                $("#send").attr("onclick", "return false;");
            }
        });
</script>