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

2017-04-23 11:06:28 +08:00
 liteyou

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

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

2941 次点击
所在节点    问与答
6 条回复
hjwasai
2017-04-23 11:12:19 +08:00
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 中聚焦就 显示提示文字,失焦就不显示。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/356749

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX