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 面向对象特性
Dec 28 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
vue视频播放暂停代码
Nov 08 Javascript
vue实现表格合并功能
Dec 01 Vue.js
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隐藏实际地址的文件下载方法
2015/04/18 PHP
PHP加密解密类实例分析
2015/04/20 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
Python中http请求方法库汇总
2016/01/06 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
深入理解Python中的super()方法
2017/11/20 Python
django 多数据库配置教程
2018/05/30 Python
python 自定义装饰器实例详解
2019/07/20 Python
django的csrf实现过程详解
2019/07/26 Python
Python 下载及安装详细步骤
2019/11/04 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
销售工作人员的自我评价分享
2013/11/10 职场文书
黄河的主人教学反思
2014/02/07 职场文书
社区母亲节活动方案
2014/03/05 职场文书
政治学求职信
2014/06/03 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android