当前位置:Gxlcms > JavaScript > JS输入框字数实时统计更新代码示

JS输入框字数实时统计更新代码示

时间:2021-07-01 10:21:17 帮助过:16人阅读

在前端开发中,很多情况下需对输入内容进行验证。实时统计功能,对于定长输入而言,可以让用户实时明确输入界限,并合理安排内容。

这篇文章主要介绍输入框字数实时统计更新的功能

字数实时统计更新

下面将以【消息内容】为例,设计实现输入框字数实时统计更新功能。
项目架构如下:

message

message.css
message.js
message.tpl

1. 在message.tpl文件中定义网页元素

//移动端微信公众号开发
<p class="weui-cellbd">
  <textarea id="content" class="weui-textarea" placeholder="新消息内容"
                   rows="3">
  </textarea>
  <p class="weui-textarea-counter">
    <span class="contentcount">0</span>/200
  </p>
</p>
//web端业务开发
<p class="modal-body" style="box-sizing: border-box;">
  <form id="newtaskform" class="form-horizontal"></form>
</p>

2.在message.js文件中绑定事件,用以统计输入字符

2017617152634379.jpg

以上就是JS输入框字数实时统计更新代码示的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行