版本一

网上找的

    promiseNum('#contnet', 10);function promiseNum(id, num) {$(id).bind("input propertychange", function () {var a = $(id).val();if (a.length > 10) {$(id).val($(id).val().substr(0,num));}});}

这种效果并没有完全达到 maxLength 的效果，长度到达之后，它依然可以继续输入内容，然后截取指定长度内容

版本二

是我自己思考想出来的思路。
分别监听keypress和 paste事件来做判断处理
keypress是键盘按下事件，监听输入的字符串超过指定长度就不让输入了

    $('#id').on('keypress', function () {if ($('#id').val().length > 10) {return false;}})

此时已经和 maxlength效果有点类似了，但是我们通过复制粘贴依然可以把内容给输入进去，所以还需要监听粘贴事件

    $('#fds2').on('paste', function () {// 1.获取剪切板的内容var pastedData = e.originalEvent.clipboardData.getData('text/plain');// 2. 获取输入框的内容var inputValue = $('#fds2').val();//3.判断粘贴的内容+输入框内容总长度是否大于限制输入的长度if(inputValue.length+ pastedData.length > 10){alert("内容已经达到最大限度,或复制内容过多")return false}})

思考：此时还没有完全实现maxLength的效果，但是这已经是最佳的解决方案，因为maxLength属性粘贴的时候它会自动根据输入框剩余可输入的内容长度来截取剪切板的内容进行填充，技术上可以轻易实现，但是 w3c 不允许，在IE中可以实现，chrome中不行，先看示例代码

    $('#fds2').on('paste', function () {// 1.获取剪切板的内容var pastedData = e.originalEvent.clipboardData.getData('text/plain');// 2. 获取输入框的内容var inputValue = $('#fds2').val();//3.判断内容是否已经超出最大限制长度,假设只能输入10个字if(inputValue.length<10){ //还可以继续填充内容//4.求出剩余可输入的长度var allowLength = 10 - inputValue.length;//5.截取剪切板中的内容var allowContent = pastedData.substr(0,allowLength);//6.再把这部分内容赋值给剪切板（在IE中是有效果的...这么好用的api 可惜了）e.originalEvent.clipboardData.setData('text/plain',allowContent);}else{return false}})

拓展

这个思路，同样可以用来限制一些富文本插件的最大输入字符个数，因为富文本限制输入

js模拟html5的maxLength效果相关推荐

php气泡效果,js 模拟气泡屏保效果代码_其他特效
核心代码: var T$ = function(id) { return document.getElementById(id); } var $extend = function(des, src) ...
js模拟小球重力回弹效果
.cont{ width: 1000px; height: 600px; background: #eee; margin: 20px auto; position: relative; } .box ...
JS实现css的hover效果，兼容移动端
Hi I'm Shendi JS实现css的hover效果,兼容移动端功能概述 CSS的hover即触碰时触发,在电脑端鼠标触碰,移动端手指触摸有的时候光靠css实现不了一些效果,例如元素触发ho ...
JS模拟模式窗口效果
<html> <head> <meta http-equiv="Content-Type" content="text/html; ...
js制作的模拟超逼真下雨效果
一层秋雨一层凉. 小楼一夜听春雨. 虞美人·听雨少年听雨歌楼上.红烛昏罗帐.壮年听雨客舟中.江阔云低.断雁叫西风. 而今听雨僧庐下.鬓已星星也.悲欢离合总无情.一任阶前.点滴到天明. 我是那迷恋微雨 ...
html实现颜料效果,JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
本文实例讲述了JS基于HTML5的canvas标签实现色相球效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: JS canvas标签制作色相球 var canvas,ctx, ...
js打印html5,控制台打印文字效果js插件-typed.js
typed.js是一款模拟控制台打印文字效果的js插件.typed.js可以自由的控制要打印的文字,以及打印的速度等,可以制作出逼真的打印文字效果. 安装可以通过bower来安装typed.js插件 ...
js模拟3D场景效果
这几个demo上星期平安夜做的,感觉效果不错,就放在出来,分享给大家. 要在二维空间模拟出三维的效果,就需要把三维的坐标转换成二维坐标.一个最基本依据是:东西越远,看到大小就越小,坐标越往消失点靠拢. ...
html5 扇形导航效果图,js+css实现扇形导航效果
本文实例为大家分享了js+css实现扇形导航效果的具体代码,供大家参考,具体内容如下\ 扇形导航 *{ margin: 0; padding: 0; } html,body{ height: 100% ...

js模拟html5的maxLength效果

版本一

版本二

拓展

js模拟html5的maxLength效果相关推荐

最新文章

热门文章