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+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
如何在vue 中引入使用jquery
Nov 10 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构造函数与析构函数用法示例
2016/09/28 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
javascript工具库代码
2012/03/29 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
django创建css文件夹的具体方法
2020/07/31 Python
利用python绘制正态分布曲线
2021/01/04 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
就业自荐信
2013/12/04 职场文书
放飞理想演讲稿
2014/09/09 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
手术室护士个人总结
2015/02/13 职场文书
感恩节寄语2015
2015/03/24 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
Pandas自定义选项option设置
2021/07/25 Python
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js