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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2779 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

textarea

class

表单框

id2

6 条回复 • 2017-04-23 13:47:22 +08:00

hjwasai

2017-04-23 11:12:19 +08:00 via Android

change 事件

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#描述

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>

类似这样，细节你自己修改

shlabc

2017-04-23 12:43:41 +08:00

呵呵，代码是用 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

2017-04-23 12:55:39 +08:00

jQuery.validate

liteyou

2017-04-23 13:47:22 +08:00

看了下 oninput onchange onprotertychange 照顾各种兼容，要写的东西比较多。考虑只用 focus() 来简单解决下，在 textarea 中聚焦就显示提示文字，失焦就不显示。