JS 实时监听input的value值改变解决方案

最新推荐文章于 2024-03-11 14:52:38 发布

無痕剑

最新推荐文章于 2024-03-11 14:52:38 发布

阅读量1.5w

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_20112609/article/details/65440593

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及JavaScript实现的输入框事件监听示例。通过jQuery库，当用户在输入框中输入文字时，按钮会动态更新已输入的字符数量。此示例已在FoxFire、Chrome等主流浏览器上进行了兼容性测试。

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

该方案在FoxFire、Chrome、360急速、Microsoft Edge、IE11下测试均可以正常显示。
html页面代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <link type="text/css" rel="stylesheet" href="../css/myhtml5.css"/>
</head>
<body>
<div><h1>测试输入框事件监听</h1></div>
<div>
    <table>
        <tr><th><span>点击输入框，输入字符：</span></th></tr>
        <tr><td><input id="input_text" type="text" placeholder="点击输入" value=""/></td></tr>
        <tr><td><input id="input_button" type="button" value="点击结束" name="完成"/></td></tr>
    </table>
</div>
<script src="../scripts/jq.js"></script>
<script src="../scripts/myhtml5.js"></script>
</body>

js代码：

$(document).ready(function () {

    $("#input_text").bind("input propertychange",function () {
        $("#input_button").val("已经输入了"+$("#input_text").val().length+"个字。。。");
    });

    $("#input_button").click(function () {
        alert($("#input_text").val()+"\n"+$(this).val());
    });
});