jQuery 限制输入字符串长度


Posted in Javascript onJune 20, 2016

我们后台做程序的时候,比如录入一篇文章,文章会有摘要,我们希望文章的字符长度是我们可以控制的,我们不希望它太长,比如限制只能输入250个字符,下面的代码实现了这种功能。

先来看一下效果图

jQuery 限制输入字符串长度

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
 // tipWrap: 提示消息的容器
 // maxNumber: 最大输入字符
 $.fn.artTxtCount = function (tipWrap, maxNumber) {
  var countClass = 'js_txtCount',
   // 定义内部容器的CSS类名
   fullClass = 'js_txtFull',
   // 定义超出字符的CSS类名
   disabledClass = 'disabled'; // 定义不可用提交按钮CSS类名
  // 统计字数
  var count = function () {
    var btn = $(this).closest('form').find(':submit'),
     val = $(this).val().length,
     // 是否禁用提交按钮
     disabled = {
      on: function () {
       btn.removeAttr('disabled').removeClass(disabledClass);
      },
      off: function () {
       btn.attr('disabled', 'disabled').addClass(disabledClass);
      }
     };
    if (val == 0) disabled.off();
    if (val <= maxNumber) {
     if (val > 0) disabled.on();
     tipWrap.html('<span class="' + countClass + '">\u8FD8\u80FD\u8F93\u5165 <strong>' + (maxNumber - val) + '</strong> \u4E2A\u5B57</span>');
    } else {
     disabled.off();
     tipWrap.html('<span class="' + countClass + ' ' + fullClass + '">\u5DF2\u7ECF\u8D85\u51FA <strong>' + (val - maxNumber) + '</strong> \u4E2A\u5B57</span>');
    };
   };
  $(this).bind('keyup change', count);
  return this;
 };
})(jQuery);
 
// demo
jQuery(function(){
// 批量
$('.autoTxtCount').each(function(){
$(this).find('.text').artTxtCount($(this).find('.tips'), 140);
});
// 单个
$('#test').artTxtCount($('#test_tips'), 10);
});
</script>
<style>
/* demo */
body {
 font-size:75%;
 font-family:'微软雅黑';
}
#demo {
 width:500px;
}
#demo .help, #demo .help a {
 color:#999;
}
#demo form {
 margin:20px 0;
 padding:8px;
 background:#F4F4F4;
 border:1px solid #EDEDED;
}
#demo .tips {
 color:#999;
 padding:0 5px;
}
#demo .tips strong {
 color:#1E9300;
}
#demo .tips .js_txtFull strong {
 color:#F00;
}
#demo textarea.text {
 width:474px;
}
</style>
</head>
<body>
<div id="demo">
 <h1>artTxtCount - 轻量级输入字数提示插件</h1>
 <p class="help">$('#text').artTxtCount($('#text_tips'), 10);</p>
 <p class="help">by tangbin. </p>
 <form class="autoTxtCount" action="" method="get">
 <div>
  <textarea class="text" name="" cols="50" rows="3"></textarea>
 </div>
 <div>
  <button type="submit">提交</button>
  <span class="tips"></span> </div>
 </form>
 <form class="autoTxtCount" action="" method="get">
 <div>
  <textarea class="text" name="" cols="50" rows="3"></textarea>
 </div>
 <div>
  <button type="submit">提交</button>
  <span class="tips"></span> </div>
 </form>
 jQuery文本框实时显示可输入字数并可禁止输入提示超出,强!
 <form action="" method="get">
 <input class="text" id="test" name="" type="text" />
 <span id="test_tips" class="tips"></span><br />
 <button type="submit">提交</button>
 </form>
</div>
</body>
</html>

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 变量作用域分析
Jul 04 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
JavaScript函数节流概念与用法实例详解
Jun 20 #Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 #Javascript
jquery通过name属性取值的简单实现方法
Jun 20 #Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 #Javascript
对jQuary选择器的全面总结
Jun 20 #Javascript
jQuery实现的可编辑表格完整实例
Jun 20 #Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 #Javascript
You might like
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
Python群发邮件实例代码
2014/01/03 Python
SVM基本概念及Python实现代码
2017/12/27 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
大学生的网络创业计划书
2013/12/26 职场文书
成考报名单位证明范本
2014/01/16 职场文书
超市中秋节活动方案
2014/02/12 职场文书
2014年城管工作总结
2014/11/20 职场文书
离职信范本
2015/06/23 职场文书
田径运动会广播稿
2015/08/19 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
python编程项目中线上问题排查与解决
2021/11/01 Python