热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了JavaScript输入框字数实时统计更新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

字数实时统计更新

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

message 

    message.css
    message.js
    message.tpl 

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

//移动端微信公众号开发
0/200
//web端业务开发

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 = '
'+ '
' + '
' + '消息内容超出最大限制0/200
' + '
'; $("#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); });

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


推荐阅读
  • Java学习笔记之使用反射+泛型构建通用DAO
    本文介绍了使用反射和泛型构建通用DAO的方法,通过减少代码冗余度来提高开发效率。通过示例说明了如何使用反射和泛型来实现对不同表的相同操作,从而避免重复编写相似的代码。该方法可以在Java学习中起到较大的帮助作用。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 原理:dismiss再弹出,把dialog设为全局对象。if(dialog!null&&dialog.isShowing()&&!(Activity.)isFinishing()) ... [详细]
  • 如何在服务器主机上实现文件共享的方法和工具
    本文介绍了在服务器主机上实现文件共享的方法和工具,包括Linux主机和Windows主机的文件传输方式,Web运维和FTP/SFTP客户端运维两种方式,以及使用WinSCP工具将文件上传至Linux云服务器的操作方法。此外,还介绍了在迁移过程中需要安装迁移Agent并输入目的端服务器所在华为云的AK/SK,以及主机迁移服务会收集的源端服务器信息。 ... [详细]
  • 如何在文本中运行Java程序
    本文介绍了在文本中运行Java程序的步骤,包括创建文本文档、修改后缀、打开DOS命令窗口、编译和运行程序。通过这些步骤,可以在文本中成功运行Java程序并输出结果。 ... [详细]
  • 海马s5近光灯能否直接更换为H7?
    本文主要介绍了海马s5车型的近光灯是否可以直接更换为H7灯泡,并提供了完整的教程下载地址。此外,还详细讲解了DSP功能函数中的数据拷贝、数据填充和浮点数转换为定点数的相关内容。 ... [详细]
  • React项目中运用React技巧解决实际问题的总结
    本文总结了在React项目中如何运用React技巧解决一些实际问题,包括取消请求和页面卸载的关联,利用useEffect和AbortController等技术实现请求的取消。文章中的代码是简化后的例子,但思想是相通的。 ... [详细]
  • iOS Swift中如何实现自动登录?
    本文介绍了在iOS Swift中如何实现自动登录的方法,包括使用故事板、SWRevealViewController等技术,以及解决用户注销后重新登录自动跳转到主页的问题。 ... [详细]
  • 微信开放外链的第二阶段:腾讯和阿里巴巴的博弈
    2021年11月30日,微信开始进行“开放外链”的第二阶段,允许在微信个人会话中打开外部链接和在微信群中打开电商链接。虽然这是腾讯和阿里巴巴都能接受的阶段性结果,但双方都不会太满意。接下来几个月,腾讯和阿里将展开复杂的博弈,我们作为外人很难看清全过程。工信部从未要求腾讯无条件开放微信API,本次开放的也只是普通的HTTP链接。 ... [详细]
  • 微信朋友圈屏蔽设置教程,轻松屏蔽无关信息
    自从微信朋友圈越来越受欢迎,很多人想知道如何屏蔽一些不想看的朋友圈信息。本文提供了屏蔽设置教程,通过点击「我」-「相册」-「…」选项 -「消息列表」,左滑即可选择「不再通知」和「删除」某条朋友圈评论或点赞。想重新接收信息时,只需左滑即可。通过这些简单操作,您可以轻松屏蔽无关信息。 ... [详细]
  • 2022年的风口:你看不起的行业,真的很挣钱!
    本文介绍了2022年的风口,探讨了一份稳定的副业收入对于普通人增加收入的重要性,以及如何抓住风口来实现赚钱的目标。文章指出,拼命工作并不一定能让人有钱,而是需要顺应时代的方向。 ... [详细]
  • 华为鸿蒙系统官网2.0报名方法及适用设备
    本文介绍了华为鸿蒙系统官网2.0报名的适用设备、报名方法以及三种方式,包括在应用商店下载开发者联盟app、在官网中进行报名、在微信公众号中申请体验HarmonyOS 2.0 手机开发者Beta版本。同时提醒错过测试机会的用户可以等待后续的正式版发布。 ... [详细]
  • 本文介绍了小程序商城引进流量的优化策略与方法。首先,通过附近小程序功能可以增加周围门店的方位并展示,吸引附近用户。其次,利用微信群聊功能,将小程序分享到多个微信群聊中,扩大影响力。最后,通过设置一些固定的活动机制,打造仪式感来吸引用户。这些方法能够有效提升小程序商城的流量,增加用户数量。 ... [详细]
  • 从高级程序员到CTO的4次能力跃迁!如何选择适合的技术负责人?
    本文讲解了从高级程序员到CTO的4次能力跃迁,以及如何选择适合的技术负责人。在初创期、发展期、成熟期的每个阶段,创业公司需要不同级别的技术负责人来实现复杂功能、解决技术难题、提高交付效率和质量。高级程序员的职责是实现复杂功能、编写核心代码、处理线上bug、解决技术难题。而技术经理则需要提高交付效率和质量。 ... [详细]
  • IT联合协会创始人分享的学习、创业和人生感悟
    本文分享了IT联合协会创始人的学习、创业和人生感悟,包括创办协会的经历、参与的比赛和活动、所关注的领域以及一些高效技巧。创始人强调了大学和工作前几年的学习资源的重要性,以及沉淀个人学习、生活和灵感资源对于大学和职场能力的影响。他还分享了自己关注的领域,包括软件开发和产品经理相关的专业方向。文章最后,他表达了对未来的期望和目标,并邀请有缘人一起交流。 ... [详细]
author-avatar
心跳-很执着
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有