源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JavaScript输入框字数实时统计更新

  • 时间:2020-05-17 06:13 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JavaScript输入框字数实时统计更新
在前端开发中,很多情况下需对输入内容进行验证。实时统计功能,对于定长输入而言,可以让用户实时明确输入界限,并合理安排内容。 [b]字数实时统计更新[/b] 下面将以【消息内容】为例,设计实现输入框字数实时统计更新功能。 项目架构如下: [b]message  [/b]     message.css     message.js     message.tpl  [b]1. 在message.tpl文件中定义网页元素[/b]
//移动端微信公众号开发
<div class="weui-cell__bd">
  <textarea id="content" class="weui-textarea" placeholder="新消息内容"
                   rows="3">
  </textarea>
  <div class="weui-textarea-counter">
    <span class="contentcount">0</span>/200
  </div>
</div>
//web端业务开发
<div class="modal-body" style="box-sizing: border-box;">
  <form id="newtaskform" class="form-horizontal"></form>
</div>

[b]2.在message.js文件中绑定事件,用以统计输入字符[/b]
//移动端 tooltips提示形式
$('#content').bind('input propertychange', function () {
  var fizeNum = $(this).val().length;
  if (fizeNum > 200) {
    var char = $(this).val();
    char = char.substr(0, 200);
    $(this).val(char);
    fizeNum = 200;
    tooltipsShow('消息内容不能超过200字');
  }
  $(this).parent().find('.contentcount').text(fizeNum);
});
//web网页span提示形式
FileName = '<div class="form-group" id="text"><label class="col-sm-3 control-label" id="textlabel"><span class="dot"></span>消息内容</label>'+ 
'<div class="col-sm-9 input-container "><textarea id="msgcontent" name="text" rows="8" style="width:100%;padding-right:20px"></textarea>' +
'<div class="counter" style="float:right;">' +
'<span id="texttips" style="display: none; color: #ff0000;">消息内容超出最大限制</span><span class="contentcount">0</span>/200</div>' +
'</div></div>';
$("#newtaskform").append(FileName);
$('#msgcontent').bind('input propertychange', function () {
  var fizeNum = $(this).val().length;
  if (fizeNum > 200) {
    var char = $(this).val();
    char = char.substr(0, 200);
    $(this).val(char);
    fizeNum = 200;
    $("#texttips").show();
  }else{
    $("#texttips").hide();
  }
  $(this).parent().find('.contentcount').text(fizeNum);
});

[img]http://files.jb51.net/file_images/article/201706/2017617152634379.jpg?2017517152646[/img] 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部