TextArea設定MaxLength屬性最大輸入值的js程式碼_javascript技巧

標準的DHTML文件中TEXTAREA的MAXLENGTH屬性預設不起作用，只有當事件發生時才起作用
如下：http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp
但TEXT中有且起作用，
那麼在TEXTAREA中怎麼實現輸入內容不能超過多少個字元呢。

方法1、如果只需要截取多少個字符的內容，則可以:

複製代碼 程式碼如下:

或

複製程式碼 程式碼如下:

方法2、

複製程式碼

程式碼如下: function ismaxlength(obj){ var mlength=obj. getAttribute? parseInt(obj.getAttribute("maxlength")) : ""

if (obj.getAttribute && obj.value.length>mlength)

obj.value=obj.value.length>mlength)
obj.value=obj.value.
}




這個方法採用截斷法，輸入到最後一個字元的時候如果再輸入則會顯示遊標閃爍。但可以解決使用CTRL C複製過來的長度限制問題,但如果用滑鼠複製過來的不還是不行。


方法3

、這個方法直接判斷輸入的長度



複製代碼

代碼如下:




當輸入內容大於15時因為返回為false所以這個實作不會顯示遊標閃爍的問題，但沒有解決複製過來的長度限制問題即複製過來的內容可以超過最大長度限制
return (Object.value.length

方法4
、其實方法4是方法2與方法3的基礎上進一步最佳化。客觀的說方法2與方法3都只做了一部分工作




複製程式碼


程式碼如下:


程式碼如下:

程式碼如下:

cols="45" rows="3" wrap="virtual" onkeypress="return( this.value.lengthonkeydown="textlen(this,20)" onkeyup="textlen(this,20)" onblur="maxtext(this,20)" > <br>上面的方法在原來的基礎上加了onblur事件，這主要用於處理當用戶不是採用輸入而是透過複製貼上方法來完成文字的轉入時的問題。實際就是方法2與方法3的結合版。 以下是我為TextArea增加並利用maxlength屬性及結合上例的結果：<script type="text/javascript">function ismaxlength(obj){var mlength=obj.getAttribute? parseInt(obj. getAttribute("maxlength")) : ""if (obj.getAttribute && obj.value.length>mlength)alert('此文字方塊允許輸入最大長度為' mlength "個字元,超出內容將會被截斷")obj .value=obj.value.substring(0,mlength)}function imposeMaxLength(obj){ var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : "" return (obj.value. );}</script><form name="myform"> <textarea maxlength="5" onkeypress="return imposeMaxLength(this)" onblur="ismaxlength(this)">

 

Javascript程式碼
-------------------- -------------------------------------------------- -----------------------

複製程式碼 程式碼如下:

function SetTextAreaMaxLength(controlId,length)
{
// TextArea 的JScript 檔案
// 阻止使用者輸入超過maxLength 的字元
Keyfunction doo( 🎜>maxLength = 長度；
值=control.value;
if(maxLength && value.length > maxLength-1){
event.returnValue = false;
Lmaxth = parseInt(Lmaxth));
}
}
// 取消預設行為
function doBeforePaste(control,length){
maxLength = length;
if(maxLength)
maxLength = length;
if(maxLength)
{
event> returnValue = false;
}
}
// 取消預設行為並建立新的貼上程式
function doPaste(control,length){
maxLength = length
值= control.value;
if(maxLength){
event.returnValue = false;
maxLength = parseInt(maxLength);
var oTR = control.document.selection.createRange()
var iInsertLength = maxLength - value.length oTR.text.length;
var sData = window.clipboardData.getData("Text").substr(0,iInsertLength);
oTR.text = sData; }
}
函數doDragenter(control,length)
{
maxLength = 長度;
值=control.value;
if(maxLength){
event.returnValue = false;
}
}
函數addEvent(elm, evType, fn, useCapture)
{
if (elm.addEventListener)
{
elm..add fn,使用捕獲）；
返回真；
}
else if (elm.attachEvent)
{
var r = elm.attachEvent('on' evType, fn);
回傳r;
}
else {
elm['on' evType] = fn;
}
}
函數AttacheventTextAreaBeforePaste(obj,length)
函數AttacheventTextAreaBeforePaste(obj,length)
{
return function()
{
doBeforePaste(obj,length)
}
}
function AttacheventTextAreaPaste(obj,length)
{
{
doPaste(obj,length)
}
}
function AttacheventTextAreaKeyPress(obj,長度)
{
回傳函數()
{
length)
}
}
函數AttacheventTextAreaDragEnter(obj,length)
{
return function()
{
doDragenter(obj,length); 🎜>}
var obj = document.getElementById(controlId);
addEvent(obj,'按鍵',AttacheventTextAreaKeyPress(obj,length),null);
obj,length),null);
addEvent(obj,'paste',AttacheventTextAreaPaste(obj,length),null);
addEvent(obj,'dragenter',AttacheventTextAreaDragEnter(objull,length),nn);
}
function SetTextAreaMaxLength(controlId,length)
{
// TextArea 的JScript 檔案
// 阻止使用者輸入超過maxLength 的字元
function do​​o
maxLength = 長度；
值=control.value;
if(maxLength && value.length > maxLength-1){
event.returnValue = false;
Lmaxth = parseInt(max3) ;
}
}
// 取消預設行為
function doBeforePaste(control,length){
maxLength = length;
if(maxLength)
maxLength = length;
if(maxLength)
{
.returnValue = false;
}
}
// 取消預設行為並建立新的貼上程式
function doPaste(control,length){
maxLength = length;
值
值=control.value;
if(maxLength){
event.returnValue = false;
maxLength = parseInt(maxLength);
var oTR = control.document.selection.createRange()
var oTR = control.document.selection.createRange() var iInsertLength = maxLength - value.length oTR.text.length;
var sData = window.clipboardData.getData("Text").substr(0,iInsertLength);
oTR.text = sData; >}
}
函數doDragenter(control,length)
{
maxLength = 長度;
值=control.value;
if(maxLength){
event.return = false;
}
}
函數addEvent(elm, evType, fn, useCapture)
{
if (elm.addEventListener)
{
elm.Type , fn,使用捕獲）；
返回真;
}
else if (elm.attachEvent)
{
var r = elm.attachEvent('on' evType, fn); 返回r;
}
else {
elm['on' evType] = fn;
}
}
函數AttacheventTextAreaBeforePaste(obj,length) { 🎜>return function()
{
doBeforePaste(obj,length)
}
}
function AttacheventTextAreaPaste(obj,length)
{ function🎜> >{
doPaste(obj,length)
}
}
function AttacheventTextAreaKeyPress(obj,長度)
{
回傳函數()
{
,length)
}
}
函數AttacheventTextAreaDragEnter(obj,length)
{
return function()
{
doragenter(obj,lengenter(obj,lengenter);
}
var obj = document.getElementById(controlId);
addEvent(obj,'keypress',AttacheventTextAreaKeyPress(obj,length),null);
>Event(ob​​ofm-Badm-Ladm-Bunun區,B.Badbeat,Badperpaste(Bunoo-Baduno5,Badm); (obj,length),null);
addEvent(obj,'paste',AttacheventTextAreaPaste(obj,length),null);
addEvent(obj,'dragenter',AttacheventTextAreaDragEnter(objull,length),nacheventText ;
}


----------------------------------------------- ------------------------------------------------
HTML程式碼

複製程式碼 程式碼如下:TextMode="MultiLine" Height="113px" MaxLength="10">