입력 문자 수를 제한하기 위해 텍스트 영역을 구현하는 JavaScript용 샘플 코드

이 글에서는 입력 단어 수를 제한하기 위해 텍스트 영역을 구현하는 JS의 원리와 방법을 주로 소개합니다. 참고값이 아주 좋은데 아래 에디터로 살펴보겠습니다

텍스트 영역을 구현하여 입력 문자 수를 제한합니다(중국어 포함, 10자만 입력 가능, 전체 ASCII 코드 입력 가능) 20)

텍스트 영역은 텍스트 영역이라고도 하며 스크롤 막대가 있는 여러 줄의 텍스트 입력 컨트롤로 웹 페이지의 제출 양식에 자주 사용됩니다. 한 줄짜리 텍스트 상자 텍스트 컨트롤과 달리 maxlength 속성을 통해 단어 수를 제한할 수 없으므로 미리 설정된 요구 사항을 충족하도록 제한하려면 다른 방법을 찾아야 합니다.

일반적인 접근 방식은 #scripting 언어를 사용하여 텍스트 영역 텍스트 필드에 입력되는 단어 수를 제한하는 것인데 이는 간단하고 실용적입니다. ID가 txta1인 텍스트 영역 텍스트 영역이 있다고 가정합니다. 다음 코드를 통해 키보드 입력 문자를 10자(한자 또는 기타 작은 각도 문자)로 제한할 수 있습니다.

＜script language="#" type="text/ecmascript"＞ 
window.onload = function() 
{ 
document.getElementById('txta1').onkeydown = function() 
{ 
 if(this.value.length >= 10) 
  event.returnValue = false; 
} 
} 
＜/script＞

keydown(키보드 키 누름) 이벤트를 통해 지정된 ID 번호의 텍스트 영역을 모니터링하는 것이 원칙입니다. 사용자가 텍스트를 붙여넣는 경우에만 키보드 입력을 제한할 수 있습니다. 마우스 오른쪽 버튼을 통해 클립보드에 텍스트를 입력하면 단어 수를 제어할 수 없습니다.

키보드로 입력할 경우 위 텍스트 영역에는 10자까지만 입력할 수 있습니다. 그러나 우리의 목표는 달성되지 않았습니다! 일부 텍스트를 복사하고 마우스 오른쪽 버튼으로 붙여넣고 무슨 일이 일어나는지 확인하세요.

위와 유사한 다른 JS 스크립트는 아무리 훌륭하더라도 그 원리는 동일합니다. 키다운, 키업, 키누름과 같은 키보드 키 조작 이벤트를 통해 텍스트 영역을 모니터링합니다. . 입력은 마우스 오른쪽 버튼이 붙여넣는 것을 막을 수 없습니다. 이러한 이유로 텍스트 영역의 단어 수를 실제로 제한해야 한다면 웹 페이지에 또 다른 잠금을 추가해야 합니다. 이는 의심할 여지 없이 마우스 오른쪽 버튼을 비활성화해야 합니다. 추가 오버헤드가 발생하고 웹 페이지 작성자가 이를 원하지 않을 수도 있습니다. 실제로 onpropertychange 속성을 사용하는 더 간단한 방법이 있습니다.

onpropertychange는 미리 결정된 요소의 값을 판단하는 데 사용할 수 있습니다. 요소의 값이 변경되면 판단 이벤트가 트리거되고 소스를 피합니다. 단어 수를 제한하려는 목표를 이상적으로 달성합니다. 이는 JS 카테고리에 속하며 양식 상자 영역 대표에 중첩되어 사용될 수 있습니다. 다음은 위와 같이 입력을 테스트할 수 있으며 실제로 목적을 달성한다는 것을 알 수 있습니다. 방법을 사용하여 입력하면 100자(한자 또는 기타 작은 기호)만 입력할 수 있습니다.

코드:

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea>

물론입니다. , 보다 안전하기 위해 양식 데이터 처리 배경 스크립트 프로그램은 제출된 데이터를 다시 확인해야 합니다. 단어 수가 미리 설정된 수를 초과하면 그에 따라 처리하여 실제로 수를 제한하는 목적을 달성해야 합니다. 단어의. (끝)

텍스트 영역의 입력 문자 수를 제한하는 또 다른 방법(중국어 포함, 10자만 입력 가능, 전체 ASCII 코드는 20자까지 입력 가능)

<script> 
function check() { 
var regC = /[^ -~]+/g; 
var regE = /\D+/g; 
var str = t1.value; 
if (regC.test(str)){ 
 t1.value = t1.value.substr(0,10); 
} 
if(regE.test(str)){ 
 t1.value = t1.value.substr(0,20); 
} 
} 
</script> 
<textarea maxlength="10" id="t1" onkeyup="check();"> 
</textarea>

다른 방법도 있습니다:

function textCounter(field, maxlimit) { 
if (field.value.length > maxlimit){ 
field.value = field.value.substring(0, maxlimit); 
}else{ 
document.upbook.remLen.value = maxlimit - field.value.length; 
} 
} 
<textarea name=words cols=19 rows=5 class=input1 onPropertyChange= "textCounter(upbook.words, 50) "> textarea>

남은 단어 수:

<input name=remLen type=text id= "remLen " style= "background-color: #D4D0C8; border: 0; color: red " value=50 size=3 maxlength=3 readonly>
function LimitTextArea(field){ 
 maxlimit=200; 
 if (field.value.length > maxlimit) 
  field.value = field.value.substring(0, maxlimit); 
  
 }
<textarea cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" >
</textarea>

title="텍스트 영역 너비는 300자 미만이어야 합니다." 텍스트 영역에 배치하면 최대 바이트 수를 묻는 메시지가 나타납니다.

예:

<textarea title="The textarea width must less than 300 characters." cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" 
onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>

위 내용은 입력 문자 수를 제한하기 위해 텍스트 영역을 구현하는 JavaScript용 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!