liteyou
V2EX  ›  问与答

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

  •  
  •   liteyou · Apr 23, 2017 · 3654 views
    This topic created in 3322 days ago, the information mentioned may be changed or developed.

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

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

    6 replies    2017-04-23 13:47:22 +08:00
    hjwasai
        1
    hjwasai  
       Apr 23, 2017 via Android
    change 事件
    livelazily
        2
    livelazily  
       Apr 23, 2017
    如果是在支持 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#描述
    shlabc
        3
    shlabc  
       Apr 23, 2017
    <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>


    类似这样,细节你自己修改
    shlabc
        4
    shlabc  
       Apr 23, 2017   ❤️ 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>
    aroa
        5
    aroa  
       Apr 23, 2017
    jQuery.validate
    liteyou
        6
    liteyou  
    OP
       Apr 23, 2017
    看了下 oninput onchange onprotertychange 照顾各种兼容,要写的东西比较多。考虑只用 focus() 来简单解决下,在 textarea 中聚焦就 显示提示文字,失焦就不显示。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5344 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 06:55 · PVG 14:55 · LAX 23:55 · JFK 02:55
    ♥ Do have faith in what you're doing.