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 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
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 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
PHP Reflection API详解
2015/05/12 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
后勤人员岗位职责
2013/12/17 职场文书
毕业生的自我评价
2013/12/30 职场文书
车间主任岗位职责
2014/03/16 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
学生自我评语
2015/01/04 职场文书
2016年母亲节广告语
2016/01/28 职场文书
争做文明公民倡议书
2019/06/24 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python