《JavaScript 源码分析》之 maxlength.js
/*
@author: Terry
@params:
feedback - the selector for the element that gives the user feedback. Note that this will be relative to the form the plugin is run against.
hardLimit - whether to stop the user being able to keep adding characters. Defaults to true.
useInput - whether to look for a hidden input named 'maxlength' instead of the maxlength attribute. Defaults to false.
words - limit by characters or words, set this to true to limit by words. Defaults to false.
@license:
@version: 1.2
@changes: code tidy via Ariel Flesler and fix when pasting over limit and including \t or \n
*/ (function ($) { $.fn.maxlength = function (settings) { if (typeof settings == 'string') {
settings = { feedback : settings };
} settings = $.extend({}, $.fn.maxlength.defaults, settings); function length(el) {
var parts = el.value;
if ( settings.words )
parts = el.value.length ? parts.split(/\s+/) : { length : 0 };
return parts.length;
} return this.each(function () {
var field = this;
var $field = $(field);
var $form = $(field.form);
var limit = settings.useInput ? $form.find('input[name=maxlength]').val() : $field.attr('maxlength');
var $charsLeft = $form.find(settings.feedback); function limitCheck(event) {
var len = length(this);
var exceeded = len >= limit;
var code = event.keyCode;
if (!exceeded )
return; switch (code) {
case 8: // allow delete BackSpace BackSpace
case 9: // Tab Tab
case 17: // Next
case 36: // Home
case 35: // End
case 37: //
case 38: //Up Arrow
case 39: //Right Arrow
case 40: //Dw Arrow
case 46: //~
case 65: //A
return; default:
return settings.words && code != 32 && code != 13 && len == limit;
}
} var updateCount = function () {
var len = length(field);
var diff = limit - len; $charsLeft.html( diff || "0" ); // truncation code
if (settings.hardLimit && diff < 0) {
field.value = settings.words ?
// split by white space, capturing it in the result, then glue them back
field.value.split(/(\s+)/, (limit*2)-1).join('') :
field.value.substr(0, limit); updateCount();
}
};
$field.keyup(updateCount).change(updateCount);
if (settings.hardLimit) {
$field.keydown(limitCheck);
} updateCount();
});
}; $.fn.maxlength.defaults = {
useInput : false,
hardLimit : true,
feedback : '.charsLeft',
words : false
}; })(jQuery);
《JavaScript 源码分析》之 maxlength.js的更多相关文章
- angular源码分析:injector.js文件分析——angular中的依赖注入式如何实现的(续)
昨天晚上写完angular源码分析:angular中jqLite的实现--你可以丢掉jQuery了,给今天定了一个题angular源码分析:injector.js文件,以及angular的加载流程,但 ...
- 《JavaScript 源码分析》之 jquery.unobtrusive-ajax.js
/*! ** Unobtrusive Ajax support library for jQuery ** Copyright (C) Microsoft Corporation. All right ...
- LINQ to JavaScript 源码分析
在.net平台工作一年有余,最喜欢的应属Linq特性 在几个移动端web小项目过程中,前端需要对json对象集合进行比较复杂的操作,为提高开发效率,引入了LINQ to Javascript,该项目地 ...
- angular源码分析:angular的整个加载流程
在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...
- angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了
一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...
- Vuex框架原理与源码分析
Vuex是一个专为Vue服务,用于管理页面数据状态.提供统一数据操作的生态系统.它集中于MVC模式中的Model层,规定所有的数据操作必须通过 action - mutation - state ch ...
- Backbone.js源码分析(珍藏版)
源码分析珍藏,方便下次阅读! // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone ...
- basket.js 源码分析
basket.js 源码分析 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此 ...
- JavaScript 模块化及 SeaJs 源码分析
网页的结构越来越复杂,简直可以看做一个简单APP,如果还像以前那样把所有的代码都放到一个文件里面会有一些问题: 全局变量互相影响 JavaScript文件变大,影响加载速度 结构混乱.很难维护 和后端 ...
随机推荐
- 通过ProGet搭建一个内部的Nuget服务器
.NET Core项目完全使用Nuget 管理组件之间的依赖关系,Nuget已经成为.NET 生态系统中不可或缺的一个组件,从项目角度,将项目中各种组件的引用统统交给NuGet,添加组件/删除组件/以 ...
- 阿里签名中URLEncode于C#URLEncod不同之处
问题 如上图所示,阿里云的PercentEncode 转换! 为 %21 PercentEncode 源码为: package com.aliyuncs.auth; import java.io.Un ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统 (源码购买说明)
系列目录 升级日志 !!!重大版本更新:于2016-12-20日完成了系统的结构重构并合并简化了T4(这是一次重要的更新,不需要修改现有功能的代码),代码总行数比上个版本又少了1/3.更新了代码生成器 ...
- ShenNiu.MVC管理系统
本篇将要和大家分享的是一个简单的后台管理系统,这里先发个地址http://www.lovexins.com:8081/(登陆账号:youke,密码:123123:高级用户账号:gaoji,密码:123 ...
- Vertica 数据库知识汇总篇
Vertica 数据库知识汇总篇(更新中..) 1.Vertica 集群软件部署,各节点硬件性能测试 2.Vertica 创建数据库,创建业务用户测试 3.Vertica 数据库参数调整,资源池分配 ...
- 登录(ajax提交数据和后台校验)
1.前台ajax数据提交 <form id="login_form" action="" method="POST"> < ...
- GOF23设计模式归类
创建型模式:-单例模式.工厂模式.抽象工厂模式.建造者模式.原型模式结构型模式:-适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代理模式行为型模式:-模板方法模式.命令模式.迭代器模式 ...
- Android中通过ActionBar为标题栏添加搜索以及分享视窗
在Android3.0之后,Google对UI导航设计上进行了一系列的改革,其中有一个非常好用的新功能就是引入的ActionBar,他用于取代3.0之前的标题栏,并提供更为丰富的导航效果.Action ...
- Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...
- Configure a VLAN (on top of a bond) with NetworkManager (nmcli) in RHEL7
not on top of a bond Environment Red Hat Enterprise Linux 7 NetworkManager Issue Need an 802.1q VLAN ...