TextArea設(shè)置MaxLength屬性最大輸入值的js代碼
更新時間：2012年12月21日 09:24:07 作者：
TextArea中限制最大輸入長度,實現(xiàn)的方法種種，我們不在一一介紹，今天本文推薦一種簡單實用的方法，需要的朋友可以參考下
標(biāo)準(zhǔn)的DHTML文檔中TEXTAREA的MAXLENGTH屬性默認(rèn)情況下不起作用，只有當(dāng)事件發(fā)生時才起作用
如下：http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp
但TEXT中有且起作用<input type="text" maxlength="20">，
那么在TEXTAREA中怎么實現(xiàn)輸入內(nèi)容不能超過多少個字符呢。
方法1、如果只需要截取多少個字符的內(nèi)容，則可以:
復(fù)制代碼 代碼如下:
<textarea onkeyup="this.value = this.value.slice(0, 80)"></textarea>
或
復(fù)制代碼 代碼如下:
<textarea onkeyup="this.value = this.value.substring(0, 80)"></textarea>
方法2、
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function ismaxlength(obj){
var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
if (obj.getAttribute && obj.value.length>mlength)
obj.value=obj.value.substring(0,mlength)
}
</script>
<textarea maxlength="40" onkeyup="return ismaxlength(this)"></textarea>
這個方法采用截斷法，輸入到最后一個字符的時候如果再輸入則會顯示光標(biāo)閃爍。但可以解決使用CTRL+C復(fù)制過來的長度限制問題,但如果用鼠標(biāo)復(fù)制過來的不還是不行。
方法3、這個方法直接判斷輸入的長度
復(fù)制代碼 代碼如下:
<script language="javascript" type="text/javascript">
<!--
function imposeMaxLength(Object, MaxLen)
{
return (Object.value.length <MaxLen);
}
-->
</script>
<textarea name="myName" onkeypress="return imposeMaxLength(this, 15);" ></textarea>
當(dāng)輸入內(nèi)容大于15時因為返回為false所以這個實現(xiàn)不會顯示光標(biāo)閃爍的問題，但沒有解決復(fù)制過來的長度限制問題即復(fù)制過來的內(nèi)容可以超過最大長度限制
return (Object.value.length <=MaxLen);但我測試發(fā)現(xiàn)當(dāng)輸入字節(jié)數(shù)=maxlen時還可以輸入一個字符，所以我改成 return (Object.value.length <MaxLen);
方法4、其實方法4是方法2與方法3的基礎(chǔ)上進一步優(yōu)化?？陀^的說方法2與方法3都只做了一部分工作
復(fù)制代碼 代碼如下:
<mce:script language="javascript" type="text/javascript"><!--
function textlen(x,y){
var thelength = x.value.length;
window.status=thelength+' of '+y+' maximum characters.';
}
function maxtext(x,y){
tempstr = x.value
if(tempstr.length>y){
x.value = tempstr.substring(0,y);
}
textlen(x,y);
}
// --></mce:script>
<form name="myform">
<textarea name="mytextarea"
cols="45"
rows="3"
wrap="virtual"
onkeypress="return(this.value.length<20)"
onkeydown="textlen(this,20)"
onkeyup="textlen(this,20)"
onblur="maxtext(this,20)"
>
上面的方法在原來的基礎(chǔ)上加了onblur事件，這主要用于處理當(dāng)用戶不是采用輸入而是通過復(fù)制粘貼方法來完成文本的轉(zhuǎn)入時的問題。實際就是方法2與方法3的結(jié)合版。 以下是我為TextArea增加并利用maxlength屬性及結(jié)合上例的結(jié)果：<html><head><script type="text/javascript">function ismaxlength(obj){var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""if (obj.getAttribute && obj.value.length>mlength)alert('該文本框允許輸入最大長度為'+mlength+"個字符,超出內(nèi)容將會被截斷")obj.value=obj.value.substring(0,mlength)}function imposeMaxLength(obj){ var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : "" return (obj.value.length <mlength);}</script></head><body><form name="myform"> <textarea maxlength="5" onkeypress="return imposeMaxLength(this)" onblur="ismaxlength(this)"></textarea></form></body></html>
Javascript代碼
---------------------------------------------------------------------------------------------
復(fù)制代碼 代碼如下:
function SetTextAreaMaxLength(controlId,length)
{
// JScript File for TextArea
// Keep user from entering more than maxLength characters
function doKeypress(control,length){
maxLength = length;
value = control.value;
if(maxLength && value.length > maxLength-1){
event.returnValue = false;
maxLength = parseInt(maxLength);
}
}
// Cancel default behavior
function doBeforePaste(control,length){
maxLength = length;
if(maxLength)
{
event.returnValue = false;
}
}
// Cancel default behavior and create a new paste routine
function doPaste(control,length){
maxLength = length;
value = 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;
}
}
function doDragenter(control,length)
{
maxLength = length;
value = control.value;
if(maxLength){
event.returnValue = false;
}
}
function addEvent(elm, evType, fn, useCapture)
{
if (elm.addEventListener)
{
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent)
{
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}
function AttacheventTextAreaBeforePaste(obj,length)
{
return function()
{
doBeforePaste(obj,length)
}
}
function AttacheventTextAreaPaste(obj,length)
{
return function()
{
doPaste(obj,length)
}
}
function AttacheventTextAreaKeyPress(obj,length)
{
return function()
{
doKeypress(obj,length)
}
}
function AttacheventTextAreaDragEnter(obj,length)
{
return function()
{
doDragenter(obj,length);
}
}
var obj = document.getElementById(controlId);
addEvent(obj,'keypress',AttacheventTextAreaKeyPress(obj,length),null);
addEvent(obj,'beforepaste',AttacheventTextAreaBeforePaste(obj,length),null);
addEvent(obj,'paste',AttacheventTextAreaPaste(obj,length),null);
addEvent(obj,'dragenter',AttacheventTextAreaDragEnter(obj,length),null);
}
function SetTextAreaMaxLength(controlId,length)
{
// JScript File for TextArea
// Keep user from entering more than maxLength characters
function doKeypress(control,length){
maxLength = length;
value = control.value;
if(maxLength && value.length > maxLength-1){
event.returnValue = false;
maxLength = parseInt(maxLength);
}
}
// Cancel default behavior
function doBeforePaste(control,length){
maxLength = length;
if(maxLength)
{
event.returnValue = false;
}
}
// Cancel default behavior and create a new paste routine
function doPaste(control,length){
maxLength = length;
value = 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;
}
}
function doDragenter(control,length)
{
maxLength = length;
value = control.value;
if(maxLength){
event.returnValue = false;
}
}
function addEvent(elm, evType, fn, useCapture)
{
if (elm.addEventListener)
{
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent)
{
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}
function AttacheventTextAreaBeforePaste(obj,length)
{
return function()
{
doBeforePaste(obj,length)
}
}
function AttacheventTextAreaPaste(obj,length)
{
return function()
{
doPaste(obj,length)
}
}
function AttacheventTextAreaKeyPress(obj,length)
{
return function()
{
doKeypress(obj,length)
}
}
function AttacheventTextAreaDragEnter(obj,length)
{
return function()
{
doDragenter(obj,length);
}
}
var obj = document.getElementById(controlId);
addEvent(obj,'keypress',AttacheventTextAreaKeyPress(obj,length),null);
addEvent(obj,'beforepaste',AttacheventTextAreaBeforePaste(obj,length),null);
addEvent(obj,'paste',AttacheventTextAreaPaste(obj,length),null);
addEvent(obj,'dragenter',AttacheventTextAreaDragEnter(obj,length),null);
}
-----------------------------------------------------------------------------------------------
HTML代碼
復(fù)制代碼 代碼如下:
<asp:TextBox ID="TextBoxAddress" runat="server" Width="200px"
TextMode="MultiLine" Height="113px" MaxLength="10"></asp:TextBox>
<script language="javascript" type="text/javascript">
SetTextAreaMaxLength('<%=TextBoxAddress.ClientID %>',10);
</script>
您可能感興趣的文章:
- 把textarea中字符串里含有的回車換行替換成<br>的javascript代碼
- JS控制文本框textarea輸入字?jǐn)?shù)限制的方法
- javascript textarea字?jǐn)?shù)限制
- javascript textarea光標(biāo)定位方法(兼容IE和FF)
- JavaScript判斷textarea值是否為空并給出相應(yīng)提示
- JavaScript中統(tǒng)計Textarea字?jǐn)?shù)并提示還能輸入的字符
- 在textarea中顯示html頁面的javascript代碼
- JavaScript 獲取/設(shè)置光標(biāo)位置,兼容Input&&TextArea
- 用JavaScript限制textarea輸入長度 (For: IE、Firefox ...)[
- 關(guān)于js對textarea換行符的處理方法淺析
相關(guān)文章
平常設(shè)計表單的時候，我們會加入一些提示文字，最常見的做法是利用value來設(shè)置，下面與大家分享一個實例，感興趣的朋友可以參考下哈2013-06-06
webpack-mvc 傳統(tǒng)多頁面組件化開發(fā)詳解
這篇文章主要介紹了webpack-mvc 傳統(tǒng)多頁面組件化開發(fā)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
電影院選座基本上每個人都用到過，本文主要介紹了JS實現(xiàn)電影票選座的項目示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
JavaScript實現(xiàn)的冒泡排序法及統(tǒng)計相鄰數(shù)交換次數(shù)示例
這篇文章主要介紹了JavaScript實現(xiàn)的冒泡排序法及統(tǒng)計相鄰數(shù)交換次數(shù),結(jié)合實例形式分析了javascript冒泡排序的實現(xiàn)技巧及針對交換次數(shù)的統(tǒng)計方法,便于更直觀的了解冒泡排序算法,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了js中的繼承及實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
本文給大家匯總介紹了javascript格式化日期時間的五種常用方法，個人對第五種個性化輸出時間比較有興趣，基本上只要項目中能用到都是使用第五種，推薦給小伙伴們。2015-06-06
JavaScript實現(xiàn)有限狀態(tài)機的示例代碼
有限狀態(tài)機（Finite?State?Machine,?FSM）是一種數(shù)學(xué)模型,用于描述系統(tǒng)在不同狀態(tài)下的行為,本文給大家介紹JavaScript實現(xiàn)有限狀態(tài)機的示例代碼,感興趣的朋友一起看看吧2024-12-12
手把手教會你用Javascript實現(xiàn)放大鏡效果(詳細注釋+完整代碼)
放大鏡可以說是前端人必須學(xué)會的程序之一,下面這篇文章主要給大家介紹了關(guān)于手把手教會你用Javascript實現(xiàn)放大鏡效果的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了ES6 Object.assign()的用法及其使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
js實現(xiàn)百度地圖定位于地址逆解析，顯示自己當(dāng)前的地理位置
本文分享了基于javascript實現(xiàn)的百度地圖定位于地址逆解析，顯示自己當(dāng)前的地理位置的實例代碼，有興趣的朋友可以看下2016-12-12