做了个限制文本框最大输入长度的jquery插件,效果图(共2个文本框,限制最多10个字符):

功能:当超出设置的最大字符长度后,会截断字符串、更改当前元素的css(会在1秒后还原css)、支持长度超出后的异常回调

使用方式:

<body>
<textarea id="filter1" rows="5" cols="100"></textarea>
<textarea id="filter2" rows="5" cols="100"></textarea>
<br />
<span id="msg"></span>
<script language="javascript" type="text/javascript">
$(function () {
function processException(id) {
$("#msg").html(id + "&nbsp;exception occurred.<br />" + $("#msg").html());
} $("#filter1,#filter2").restrictFieldLength({
maxTextLength: 10,
restoreTime:2000,
exceptionCallback: processException
});
});
</script>
</body>

jquery.restrictFieldLength.js:

(
function ($) {
$.fn.restrictFieldLength = function (settings) {
var opts = $.extend({}, $.fn.restrictFieldLength.defaultSettings, settings || {}); return this.each(function () {
var elem = $(this); elem.on("keyup", function () {
var s = elem.val();
if (s.length >= opts.maxTextLength) {
elem.val(s.slice(0, opts.maxTextLength));
elem.prop("class", opts.exceptionCss);
if (opts.exceptionCallback) {
opts.exceptionCallback(elem[0].id);
}
var normalIt = function () {
elem.prop("class", opts.defaultCss);
}
setTimeout(normalIt, opts.restoreTime);
}
});
});
}
$.fn.restrictFieldLength.defaultSettings = {
maxTextLength: 100,
defaultCss: "restrictFieldLength_defaultCss",
exceptionCss: "restrictFieldLength_exceptionCss",
restoreTime:1000,
exceptionCallback: null
}
}
)(jQuery);

jquery.restrictFieldLength.css

.restrictFieldLength_defaultCss
{
color:black;
}
.restrictFieldLength_exceptionCss
{
color:red;
}

写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js的更多相关文章

  1. 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  2. JS和vue文本框输入改变p标签的内容测试

    文本框输入,p标签的内容自动变成文本框的内容,如下是三种方法的测试: 方法1:JS里的onchange,当文本框内容改变事件,该事件里写的方法是,获取p标签本身,然后获取文本框的值,赋值给变量,最后给 ...

  3. 监听文本框输入开发仿新浪微博限制输入字数的textarea插件

    监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...

  4. jquery正则表达式显示文本框输入范围 只能输入数字、小数、汉字、英文字母的方法

    正则表达式限制文本框只能输入数字 许多时候我们在制作表单时需要限制文本框输入内容的类型,下面我们用正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等各类代码.1.文本框只能输入数字代码(小数点 ...

  5. 【学习】文本框输入监听事件oninput

    真实项目中遇到的,需求是:一个文本框,一个按钮,当文本框输入内容时,按钮可用,当删除内容时,按钮不可用. 刚开始用的focus和blur, $(".pay-text").focus ...

  6. jQuery实现限制input框 textarea文本框输入字符数量的方法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. js入门-文本框输入特定内容控制另一个文本框

    在填写表单时,有时需要某些文本框隐藏,当一文本框输入特定内容时才会显示隐藏的文本框,这一功能可以用onchange事件或oninput事件实现.下面对比下两种方法实现的区别: onchange()定义 ...

  8. 转:zTree树控件扩展篇:巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

    是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...

  9. 监听文本框输入oninput和onpropertychange事件

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...

随机推荐

  1. (后端)springboot 在idea中实现热部署(转)

    自己用到了iIntelliJ IDEA 这个ide工具,但是和以前的工具写html,css,js直接刷新页面不同,这个需要去热部署,网上搜的解决方法: SpringBoot的web项目,在每一次修改了 ...

  2. Using IntelliJ IDEA as the Vim Editor

    转载自https://www.jetbrains.com/help/idea/using-intellij-idea-as-the-vim-editor.html This feature is on ...

  3. Linux平台下RMAN异机恢复总结

    下面总结.整理一下RMAN异机恢复这方面的知识点,这篇笔记在个人笔记里面躺了几年了,直到最近偶然被翻看到,遂整理.总结一下.如下所示,个人将整个RMAN异机恢复分为准备工作和操作步骤两大部分.当然,准 ...

  4. [20181206]关于一致性读取3.txt

    [20181206]关于一致性读取3.txt --//简单演示一致性读取以及如何读取undo重构数据块的.我不想转储对应的undo块,解析那些复杂的过程. 1.环境:SCOTT@book> @ ...

  5. c#判断两个对象和对象中的属性是否相同(以及记录对象中的哪些字段,和详细的改变情况)

    当前项目需要记录变更记录,即用户在进行编辑后,将变更操作记录下来.但是数据没有发生变化,则不记录. 代码1:(仅仅返回是否变化的标识) /// <summary> /// 反射对比实体属性 ...

  6. java开发基础知识学习

    java环境配置 classpath: .当前目录 path: java 命令所在目录 jdk安装目录 jdk/bin jre安装目录 jre/bin 安装JDK后配置环境变量如下: 安装过程用到了j ...

  7. 洗礼灵魂,修炼python(82)--全栈项目实战篇(10)—— 信用卡+商城项目(模拟京东淘宝)

    本次项目相当于对python基础做总结,常用语法,数组类型,函数,文本操作等等 本项目在博客园里其他开发者也做过,我是稍作修改来的,大体没变的 项目需求: 信用卡+商城: A.信用卡(类似白条/花呗) ...

  8. 自动化测试基础篇--Selenium Xpath定位

    摘自https://www.cnblogs.com/sanzangTst/p/7458056.html 学习 什么是xpath? XPath即为XML路径语言,它是一种用来确定XML(标准通用标记语言 ...

  9. python第一百一十一天 --Django 6 model 的相关操作

    创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行数据库操作 import MySQLdb def GetList(sql): db ...

  10. 本博客停止更新改用wordperss

    http://www.azurew.com/ 还是能有自己的博客比较爽 哈哈哈