很可惜在IE中textarea不支持maxlength属性,当然其他浏览器都支持,maxlength for textarea是 HTML5 的新属性,详见:
http://www.w3schools.com/html5/tag_textarea.asp网上有很多例子模拟这个属性,但是大部分都是利用用户输入之后再判断是否超过maxlength,如果超过就去掉最后一部分文字。
这样做一方面是用户体验不是很好,用户可以看到他输入了一些字母但是马上又不见了;另一方面是用户可以在任何位置输入,去掉最后一部分就完全不对了。
我写的这个例子考虑了这些因素,通过preventDefault来真实的模拟,同时考虑keyup和copy事件。
there are many jquery addon to simulat that,but it is not very good, because they detect the length onkeyup, which you will see the letters you type first and then gets removed afterwards. some other example just remove the last character of the textarea and
does not care where is your selection.
so we can use the following to simulate that:
$textarea.bind("keypress.formTextarea paste.formTextarea", function(event) {
if($.browser.msie && !options.bKeepTyping){
var $this = $(this);
var maxLength = $this.data(options.maxlengthData);
var currentLength = $this.val().length;
var remainLength = maxLength - currentLength;
var selectionLength = document.selection.createRange().text.length;
if(event.type == 'keypress'){
if(event.which > 32 && event.which < 127 && !event.metaKey && (remainLength <= 0) && selectionLength == 0){
return false;
}
}else if(event.type == 'paste'){
var pasteText = window.clipboardData.getData('Text');
if(currentLength - selectionLength + pasteText.length > maxLength){
window.clipboardData.setData('Text',pasteText.substring(0,maxLength -(currentLength - selectionLength) ))
}
}
}
});
another way is to make a clone to apply events on the clone
分享到:
相关推荐
IE6-9 input和textarea元素的placeholder(占位符)属性与textarea元素的maxlength(最大长度限制)属性的修复与所有浏览器的实时输入捕捉,仅需要提供一个元素或者元素id与实时捕捉回调函数(可选)。甚至实现了各...
// JQuery为textarea添加maxlength // textarea默认不支持maxlength属性。 // 通过JQuery的keyup事件: JQuery代码如下: 代码如下: [removed] $(function(){ //IE也能用textarea $(“textarea[maxlength]”).keyup...
textarea默认不支持maxlength属性。所以通过jquery实现下。具体的看代码。
textarea称文本域,又称文本区,其不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求
NULL 博文链接:https://yelb.iteye.com/blog/1141762
标准的DHTML文档中TEXTAREA的MAXLENGTH属性默认情况下不起作用,只有当事件发生时才起作用 如下:http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp 但TEXT中有且起作用<input type...
主要介绍了maxlength属性在textarea里奇怪的表现的相关资料,需要的朋友可以参考下
实际上,许多jQuery用户在插件创作上的首次尝试都涉及到textarea maxlength的一些变化,如下所示,它监视键盘事件并在结束时修剪textarea的值: // this is not confine... just a naive maxlength impleme
就行,可是测试确总是不过,原因是设置了多行模式,在这样的情况下生成的html代码就是textarea,同时maxlength属性就没有被增加上,因为IE不支持textarea 的 maxlength属性,于是,在firefox 6中测试,发现firefox是...
解决textarea文字太多无法高度自适应问题,使用div模拟textarea
textarea maxlength="200" @input="descInput" v-model="desc" /> <span>{{remnant}}/200 javascript代码如下: data(){ return{ remnant: 200 } } methods:{ descInput(){ var txtVal = this.desc.length...
textarea在文本之后获得焦点,适合ie,火狐,谷歌
解决Flex在非主应用程序中,textarea和input不能输入中文的 方法。
textarea根据内容自适应高度 组件 注意:要监听input事件改变value值 使用: <autoheight_textarea value="{{value}}" placeholder="写个评论" bindinput="listenerinput"></autoheight_textarea>
textarea 自适应大小 兼容Chrome ie等浏览器,自动调整大小