liteyou
V2EX  ›  问与答

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

  •  
  •   liteyou · Apr 23, 2017 · 4026 views
    This topic created in 3482 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
    hjwasai
    Apr 23, 2017 via Android
    1
    change 事件
    livelazily
    livelazily
    Apr 23, 2017
    2
    如果是在支持 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
    shlabc
    Apr 23, 2017
    3
    <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
    shlabc
    Apr 23, 2017❤️1
    4
    呵呵,代码是用 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
    aroa
    Apr 23, 2017
    5
    jQuery.validate
    liteyou
    liteyou
    OP
    Apr 23, 2017
    6
    看了下 oninput onchange onprotertychange 照顾各种兼容,要写的东西比较多。考虑只用 focus() 来简单解决下,在 textarea 中聚焦就 显示提示文字,失焦就不显示。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1744 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 17:19 · PVG 01:19 · LAX 09:19 · JFK 12:19
    ♥ Do have faith in what you're doing.