TextArea不支持maxlength的解決辦法(jquery)
更新時間:2011年09月13日 20:32:07 作者:
自己寫了一個jquery的擴展,這樣就可以很容易實現(xiàn)對textarea控制最大長度了。
用.net 控件久了,在給一個頁面的TextBox 增加控制長度的控制時,簡單的加了一個maxlength='xxx' 就行,可是測試確總是不過,原因是設(shè)置了多行模式,在這樣的情況下生成的html代碼就是textarea,同時maxlength屬性就沒有被增加上,因為IE不支持textarea 的 maxlength屬性,于是,在firefox 6中測試,發(fā)現(xiàn)firefox是支持這個屬性的。那么就簡單了。自己寫了一個jquery的擴展,這樣就可以很容易實現(xiàn)對textarea控制最大長度了。
擴展代碼如下:
(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);
以上只是針對IE控制了復制粘貼的控制以及輸入時控制,由于使用IE的特性,這些方法在firefox中是無效的。
調(diào)用代碼:
$(document).ready(function() {
$("#ctl00_ZiiOContent_ucQuestionnaire_txtquestion4_2").textarealimit();
});
擴展代碼如下:
復制代碼 代碼如下:
(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);
以上只是針對IE控制了復制粘貼的控制以及輸入時控制,由于使用IE的特性,這些方法在firefox中是無效的。
調(diào)用代碼:
復制代碼 代碼如下:
$(document).ready(function() {
$("#ctl00_ZiiOContent_ucQuestionnaire_txtquestion4_2").textarealimit();
});
您可能感興趣的文章:
- jQuery中size()方法用法實例
- jquery下div 的resize事件示例代碼
- jquery得到font-size屬性值實現(xiàn)代碼
- jquery 實現(xiàn)的改變顏色與背景的代碼 change(fontsize,background)補充2
- Jquery change(fontsize,background) 改變顏色與背景的代碼
- jQuery對象的length屬性用法實例
- 通過length屬性判斷jquery對象是否存在
- jQuery maxlength文本字數(shù)限制插件
- JQuery為textarea添加maxlength屬性的代碼
- jQuery length 和 size()區(qū)別總結(jié)
相關(guān)文章
jQuery插件zTree實現(xiàn)刪除樹子節(jié)點的方法示例
這篇文章主要介紹了jQuery插件zTree實現(xiàn)刪除樹子節(jié)點的方法,結(jié)合實例形式分析了jQuery樹形插件zTree針對節(jié)點的遍歷與刪除操作相關(guān)技巧,需要的朋友可以參考下2017-03-03jQuery實現(xiàn)限制textarea文本框輸入字符數(shù)量的方法
這篇文章主要介紹了jQuery實現(xiàn)限制textarea文本框輸入字符數(shù)量的方法,涉及jQuery鍵盤事件及頁面元素的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05jQuery插件HighCharts實現(xiàn)氣泡圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)氣泡圖效果,結(jié)合完整實例形式分析了jQuery插件HighCharts繪制氣泡圖的實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03