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

2024-02-25 08:46:34

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

字数实时统计更新

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

message

message.css
message.js
message.tpl

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

//移动端微信公众号开发
<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>

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

//移动端 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);
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js实现统计字符串中特定字符出现个数的方法

本文实例讲述了js实现统计字符串中特定字符出现个数的方法.分享给大家供大家参考,具体如下: //js统计字符串中包含的特定字符个数 function getPlaceholderCount(strSource) { //统计字符串中包含{}或{xxXX}的个数 var thisCount = 0; strSource.replace(/\{[xX]+\}|\{\}/g, function (m, i) { //m为找到的{xx}元素.i为索引 thisCount++; }); return th
JS使用单链表统计英语单词出现次数

本文实例为大家分享了JS 列出所有单词及其出现次数的实现代码,JS统计英语单词出现次数,可以调用LinkedList 类的方法orderInsert(), 以字母大小的顺序储存英文字符串,同时记录英文单词出现的次数,供大家参考,具体内容如下 <html> <head> <title>Linked List</title> <meta charset="utf-8"> </head> <body> &l
js实现多行文本框统计剩余字数功能

效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js统计文本框剩余字数</title> <style type="text/css"> #area{ width: 300px; height: 300px; resize:none; } </st
JavaScript统计字符串中每个字符出现次数完整实例

本文实例讲述了JavaScript统计字符串中每个字符出现次数的方法.分享给大家供大家参考,具体如下: 这是一个面试题,要求随便给你一个字符串,让你求出字符串中每个字符出现的次数. 先来看看运行效果截图: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
JS查找字符串中出现最多的字符及个数统计

例如:求字符串'nininihaoa'中出现次数最多字符 var str = "nininihaoa"; var o = {}; for (var i = 0, length = str.length; i < length; i++) { var char = str.charAt(i); if (o[char]) { o[char]++; //次数加1 } else { o[char] = 1; //若第一次出现,次数记为1 } } console.log(o); //输出的
JavaScript实现的冒泡排序法及统计相邻数交换次数示例

本文实例讲述了JavaScript实现的冒泡排序法及统计相邻数交换次数.分享给大家供大家参考,具体如下: <html> <head>JS冒泡排序</head> <body> <script> var arr=[-1,-2,-30,-4,-5,-6]; var flag=false; //判断相邻两个数是否交换过 var n=0; //计算交换次数 for(var i=0;i<arr.length-1;i++){ //i表示的是每次找出来的最
动态统计当前输入内容的字节、字符数的实例详解

动态统计当前输入内容的字节.字符数的实例详解看到网上有好多利用charAt方法,原理也很简单,用正则判断是不是中文,如果是的话,字节数就加2,不是的话,字节数就加1. 后来发现另一种方式,由于一个汉字对应是两个字节,可利用正则,将匹配到的汉字用两个字符代替,例如:"xx",最后获得转化后的字符串的长度即是字节数. 而字符数就是对应有多少个汉字.字母.符号. //短信内容字数 $scope.bytesCount= 0; $scope.smsLength = 0; $scope.smsC
JavaScript输入框字数实时统计更新

在前端开发中,很多情况下需对输入内容进行验证.实时统计功能,对于定长输入而言,可以让用户实时明确输入界限,并合理安排内容. 字数实时统计更新下面将以[消息内容]为例,设计实现输入框字数实时统计更新功能. 项目架构如下: message message.css message.js message.tpl 1. 在message.tpl文件中定义网页元素 //移动端微信公众号开发 <div class="weui-cell__bd"> <textar
jQuery实时统计输入框字数及限制

项目中经常会用到文本输入框,而且需要限制输入的字数. 下面分享一个 jQuery 实时统计输入框输入字数及限制输入字数的方法,代码如下: HTML:简单的写一下,能实现功能即可. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
javascript实现点击商品列表checkbox实时统计金额的方法

本文实例讲述了javascript实现点击商品列表checkbox实时统计金额的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999
vue2.0实现移动端的输入框实时检索更新列表功能

最近在做vue2.0的项目遇到一个移动端实时检索搜索更新列表的效果,当用户在搜索框输入客户的电话或姓名的时候,客户列表内容会做相应的更新,下面给大家看下图~· html <input type="text" id="getval" class="flex-1" @blur="serchhide" v-model="val" v-focus v-on:input ="inputFunc&quo
AngularJS实现的输入框字数限制提醒功能示例

本文实例讲述了AngularJS实现的输入框字数限制提醒功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net AngularJS字数提示</title> </head> <style> *{ margin:0; paddi
jQuery实现简易的输入框字数计数功能示例

本文实例讲述了jQuery实现简易的输入框字数计数功能.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.7.2.min.js"></scr
input输入框内容实时监测(附代码)

输入框内容实时监测!只有输入框内容发生改变才会触发事件,如果输入框内容没有改变则不会触发该事件! 代码如下: <script type="text/javascript" src="jquery-3.2.1.js"></script> <script type="text/javascript"> function OnInput (event) { alert (event.target.value); }
JavaScript实现页面实时显示当前时间的简单实例

复制代码代码如下: <html> <head> <title>JavaScript实现页面实时显示当前时间</title> </head> <body> <script language="javascript"> function showtime() { var today,hour,second,minute,year,month,date; var strDate ; today=new Da
JavaScript通过setTimeout实时显示当前时间的方法

本文实例讲述了JavaScript通过setTimeout实时显示当前时间的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
SQL Server实时同步更新远程数据库遇到的问题小结

工作中遇到这样的情况,需要在更新表TableA(位于服务器ServerA 172.16.8.100中的库DatabaseA)同时更新TableB(位于服务器ServerB 172.16.8.101中的库DatabaseB). TableA与TableB结构相同,但数据数量不一定相同,应为有可能TableC也在更新TableB.由于数据更新不频繁,为简单起见想到使用了触发器Tirgger.记录一下遇到的一些问题: 1. 访问异地数据库在ServerA 中创建指向ServerB的链接服务器,并做好

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

相关推荐

随机推荐