TextArea不支持maxlength的解決辦法(jquery)
更新時(shí)間：2011年09月13日 20:32:07 作者：
自己寫了一個(gè)jquery的擴(kuò)展，這樣就可以很容易實(shí)現(xiàn)對(duì)textarea控制最大長(zhǎng)度了。
用.net 控件久了，在給一個(gè)頁(yè)面的TextBox 增加控制長(zhǎng)度的控制時(shí)，簡(jiǎn)單的加了一個(gè)maxlength='xxx' 就行，可是測(cè)試確總是不過(guò)，原因是設(shè)置了多行模式，在這樣的情況下生成的html代碼就是textarea,同時(shí)maxlength屬性就沒(méi)有被增加上，因?yàn)镮E不支持textarea 的 maxlength屬性，于是，在firefox 6中測(cè)試，發(fā)現(xiàn)firefox是支持這個(gè)屬性的。那么就簡(jiǎn)單了。自己寫了一個(gè)jquery的擴(kuò)展，這樣就可以很容易實(shí)現(xiàn)對(duì)textarea控制最大長(zhǎng)度了。
擴(kuò)展代碼如下：
(function($){
$.fn.textarealimit = function(settings) {
settings = jQuery.extend({
length:1000
}, settings);
maxLength =settings.length;
$(this).attr("maxlength",maxLength).bind("keydown",doKeydown).bind("keypress",doKeypress).bind("beforepaste",doBeforePaste).bind("paste",doPaste);
function doKeypress()
{
var oTR = document.selection.createRange()
if(oTR.text.length >= 1)
event.returnValue = true
else if(this.value.length > maxLength-1)
event.returnValue = false
}
function doKeydown()
{
var _obj=this;
setTimeout(function()
{
if(_obj.value.length > maxLength-1)
{
var oTR = window.document.selection.createRange()
oTR.moveStart("character", -1*(_obj.value.length-maxLength))
oTR.text = ""
}
},1)
}
function doBeforePaste()
{
event.returnValue = false
}
function doPaste()
{
event.returnValue = false
var oTR = document.selection.createRange()
var iInsertLength = maxLength - this.value.length + oTR.text.length
var sData = window.clipboardData.getData("Text").substr(0, iInsertLength)
oTR.text = sData;
}
}
})(jQuery);
以上只是針對(duì)IE控制了復(fù)制粘貼的控制以及輸入時(shí)控制，由于使用IE的特性，這些方法在firefox中是無(wú)效的。
調(diào)用代碼：
$(document).ready(function() {
$("#ctl00_ZiiOContent_ucQuestionnaire_txtquestion4_2").textarealimit();
});
擴(kuò)展代碼如下：
復(fù)制代碼 代碼如下:
(function($){
$.fn.textarealimit = function(settings) {
settings = jQuery.extend({
length:1000
}, settings);
maxLength =settings.length;
$(this).attr("maxlength",maxLength).bind("keydown",doKeydown).bind("keypress",doKeypress).bind("beforepaste",doBeforePaste).bind("paste",doPaste);
function doKeypress()
{
var oTR = document.selection.createRange()
if(oTR.text.length >= 1)
event.returnValue = true
else if(this.value.length > maxLength-1)
event.returnValue = false
}
function doKeydown()
{
var _obj=this;
setTimeout(function()
{
if(_obj.value.length > maxLength-1)
{
var oTR = window.document.selection.createRange()
oTR.moveStart("character", -1*(_obj.value.length-maxLength))
oTR.text = ""
}
},1)
}
function doBeforePaste()
{
event.returnValue = false
}
function doPaste()
{
event.returnValue = false
var oTR = document.selection.createRange()
var iInsertLength = maxLength - this.value.length + oTR.text.length
var sData = window.clipboardData.getData("Text").substr(0, iInsertLength)
oTR.text = sData;
}
}
})(jQuery);
以上只是針對(duì)IE控制了復(fù)制粘貼的控制以及輸入時(shí)控制，由于使用IE的特性，這些方法在firefox中是無(wú)效的。
調(diào)用代碼：
復(fù)制代碼 代碼如下:
$(document).ready(function() {
$("#ctl00_ZiiOContent_ucQuestionnaire_txtquestion4_2").textarealimit();
});
您可能感興趣的文章:
- jQuery中size()方法用法實(shí)例
- jquery下div 的resize事件示例代碼
- jquery得到font-size屬性值實(shí)現(xiàn)代碼
- jquery 實(shí)現(xiàn)的改變顏色與背景的代碼 change(fontsize,background)補(bǔ)充2
- Jquery change(fontsize,background) 改變顏色與背景的代碼
- jQuery對(duì)象的length屬性用法實(shí)例
- 通過(guò)length屬性判斷jquery對(duì)象是否存在
- jQuery maxlength文本字?jǐn)?shù)限制插件
- JQuery為textarea添加maxlength屬性的代碼
- jQuery length 和 size()區(qū)別總結(jié)
相關(guān)文章
jquery實(shí)現(xiàn)表格奇數(shù)偶數(shù)行不同樣式(有圖為證及實(shí)現(xiàn)代碼)
表格奇數(shù)偶數(shù)行不同樣式,相信很多網(wǎng)友都想試試手吧，由于經(jīng)驗(yàn)上千所以只能半途而廢，為了響應(yīng)網(wǎng)友的心聲，本文整理了一些操作技巧，有圖為證，感興趣的朋友可以了解下哦2013-01-01
jquery實(shí)現(xiàn)側(cè)邊彈出的垂直導(dǎo)航
這篇文章主要介紹了jquery動(dòng)畫特效結(jié)合css實(shí)現(xiàn)側(cè)邊彈出的垂直導(dǎo)航的方法及代碼分享,需要的朋友可以參考下2014-12-12
jQuery頭像裁剪工具jcrop用法實(shí)例(附演示與demo源碼下載)
這篇文章主要介紹了jQuery頭像裁剪工具jcrop用法,結(jié)合實(shí)例形式分析了jQuery頭像裁剪工具jquery.jcrop.js具體使用技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
Easyui ueditor 整合解決不能編輯的問(wèn)題(推薦)
這篇文章主要介紹了Easyui ueditor 整合解決不能編輯的問(wèn)題 ,需要的朋友可以參考下2017-06-06
jQuery 聯(lián)動(dòng)日歷實(shí)現(xiàn)代碼
首先還是感謝下 妙味課堂 錄制的這一個(gè)日歷聯(lián)動(dòng)的視頻，正好整理下，方便需要的朋友2012-05-05
這篇文章主要介紹了jQuery中DOM樹操作之復(fù)制元素的方法,實(shí)例分析了DOM樹復(fù)制元素的使用技巧,需要的朋友可以參考下2015-01-01
簡(jiǎn)單實(shí)現(xiàn)jQuery彈幕效果
這篇文章主要為大家詳細(xì)介紹了簡(jiǎn)單實(shí)現(xiàn)jQuery彈幕效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
基于Jquery插件Uploadify實(shí)現(xiàn)實(shí)時(shí)顯示進(jìn)度條上傳圖片
這篇文章主要介紹了基于Jquery插件Uploadify實(shí)現(xiàn)實(shí)時(shí)顯示進(jìn)度條上傳圖片的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
開發(fā)插件的兩個(gè)方法jquery.fn.extend與jquery.extend
jQuery為開發(fā)插件提拱了兩個(gè)方法，分別是jquery.fn.extend與jquery.extend，接下來(lái)就為大家介紹下兩者的具體使用2013-11-11
可以讓指定的層浮動(dòng)到網(wǎng)頁(yè)上的任何位置，當(dāng)滾動(dòng)條滾動(dòng)時(shí)它會(huì)保持在當(dāng)前位置不變，不會(huì)產(chǎn)生閃動(dòng)2008-12-12