首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
V2EX  ›  问与答

js/jQuery 监测到用户在表单 textarea 区域开始输入后,在表单框下面显示一行提醒文字,请教怎么写最简单?

  •  
  •   liteyou · 2017-04-23 11:06:28 +08:00 · 1723 次点击
    这是一个创建于 879 天前的主题,其中的信息可能已经有所发展或是发生改变。

    <textarea id="id1" class="class1"></textarea>

    <p id="id2" class="class2">这里是提醒文字</p>

    6 回复  |  直到 2017-04-23 13:47:22 +08:00
        1
    hjwasai   2017-04-23 11:12:19 +08:00 via Android
    change 事件
        2
    livelazily   2017-04-23 12:13:16 +08:00
    如果是在支持 html5 的浏览器, input 事件最好 https://developer.mozilla.org/zh-CN/docs/Web/Events/input

    如果不是 html5 的浏览器,可以用 keyup 事件

    textarea 的 change 事件需要用户离开输入框才会触发 https://developer.mozilla.org/zh-CN/docs/Web/Events/change#描述
        3
    shlabc   2017-04-23 12:40:20 +08:00
    <textarea id="name" name="name" type="text"></textarea>
    <span id="name_msg"></span>

    <script type="text/javascript">
    $('#name').bind('input propertychange', function() {
    $('#name_msg').html($(this).val().length + ' 字');
    });
    </script>


    类似这样,细节你自己修改
        4
    shlabc   2017-04-23 12:43:41 +08:00   ♥ 1
    呵呵,代码是用 input 现改的,忘了去掉 type="text"了

    <textarea id="name" name="name"></textarea>
    <span id="name_msg"></span>

    <script type="text/javascript">
    $('#name').bind('input propertychange', function() {
    $('#name_msg').html($(this).val().length + ' 字');
    });
    </script>
        5
    aroa   2017-04-23 12:55:39 +08:00
    jQuery.validate
        6
    liteyou   2017-04-23 13:47:22 +08:00
    看了下 oninput onchange onprotertychange 照顾各种兼容,要写的东西比较多。考虑只用 focus() 来简单解决下,在 textarea 中聚焦就 显示提示文字,失焦就不显示。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2419 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 33ms · UTC 14:59 · PVG 22:59 · LAX 07:59 · JFK 10:59
    ♥ Do have faith in what you're doing.