jQuery实时统计输入框字数及限制


Posted in jQuery onJune 24, 2020

项目中经常会用到文本输入框,而且需要限制输入的字数。

下面分享一个 jQuery 实时统计输入框输入字数及限制输入字数的方法,代码如下:

HTML:简单的写一下,能实现功能即可。

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>jQuery实时统计输入框字数及限制的方法</title>
 <style>
  #content{
   border: none;
   outline: none;
   resize: none;
   width: 200px;
   height: 100px;
   border: 1px solid #ccc;
   border-radius: 6px;
   padding: 4px;
  }
 </style>
</head>

<body>
 <textarea id="content" placeholder="新消息内容" ></textarea>
 <span class="contentcount">0</span>/200
 <script src="./jquery.js"></script>
 <script>
  $('#content').bind('input propertychange',function(){
   var count = $(this).val().length; //获取输入的字数
   if(count > 200){
    var char = $(this).val();
    char = char.substr(0,200); //截取前200的字符串
    $(this).val(char);
    count = 200;
    alert('超出200了')
   }
   $('.contentcount').text(count);
  })
 </script>
</body>

</html>

效果如下

jQuery实时统计输入框字数及限制

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

jQuery 相关文章推荐
jQuery validata插件实现方法
Jun 25 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jquery实现拖拽小方块效果
Dec 10 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 #jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 #jQuery
jQuery 移除事件的方法
Jun 20 #jQuery
Jquery ajax书写方法代码实例解析
Jun 12 #jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 #jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 #jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 #jQuery
You might like
php项目打包方法
2008/02/18 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
浅谈php自定义错误日志
2015/02/13 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
Python导入oracle数据的方法
2015/07/10 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
详解python持久化文件读写
2019/04/06 Python
Python实现最常见加密方式详解
2019/07/13 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
小学新学期教师寄语
2014/01/18 职场文书
元旦获奖感言
2014/03/08 职场文书
护理目标管理责任书
2014/07/25 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
大学感恩节活动总结
2015/05/05 职场文书
党员转正介绍人意见
2015/06/03 职场文书
学校隐患排查制度
2015/08/05 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python