search

Home  >  Article  >  Web Front-end  >  TextArea sets the maximum input value of the MaxLength attribute js code_javascript skills

TextArea sets the maximum input value of the MaxLength attribute js code_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:46:081149browse

The MAXLENGTH attribute of TEXTAREA in standard DHTML documents does not work by default and only works when an event occurs
As follows: http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp
But there is and works in TEXT ,
So how to realize that the input content cannot exceed how many characters in TEXTAREA?

Method 1, if you only need to intercept the content of a few characters, you can:

Copy code The code is as follows:



or
Copy code The code is as follows:




Method 2,
Copy code The code is as follows:




This method uses the truncation method. When the last character is entered, if you enter again, the cursor will flash. But it can solve the length limit problem of using CTRL C to copy, but it still doesn't work if you use the mouse to copy.

Method 3, this method directly determines the length of the input
Copy code The code is as follows :




When the input content is greater than 15, because it returns false, this implementation will not show the problem of cursor flickering, but it does not solve the copied length. The limitation problem is that the copied content can exceed the maximum length limit
return (Object.value.length <=MaxLen); but I tested and found that when the number of bytes entered =maxlen, one character can be entered, so I changed it to return (Object.value.length
Method 4. In fact, method 4 is a further optimization based on method 2 and method 3. Objectively speaking, methods 2 and 3 only do part of the work
Copy the code The code is as follows:





Javascript code
---- -------------------------------------------------- ---------------------------------------
Copy code The code is as follows:

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 code
코드 복사 코드는 다음과 같습니다.

TextMode="MultiLine" Height="113px" MaxLength="10">
<스크립트 언어= "javascript" type="text/javascript">
SetTextAreaMaxLength('<%=TextBoxAddress.ClientID %>',10)

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Restrictions before JS uploads images include (jpg jpg gif and size, height and width), etc. _javascript skillsNext article：Restrictions before JS uploads images include (jpg jpg gif and size, height and width), etc. _javascript skills

Related articles

See more

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved