maxlength attribute_javascript 기술을 통해 텍스트 영역에서 단어 수를 제한할 수 없는 문제 해결

텍스트 영역은 텍스트 영역이라고도 하며 스크롤 막대가 있는 여러 줄의 텍스트 입력 컨트롤로 웹 페이지의 제출 양식에 자주 사용됩니다. 한 줄짜리 텍스트 상자 텍스트 컨트롤과 달리 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 스크립트는 아무리 우수하더라도 keydown, keyup 또는 keypress와 같은 키보드 키 조작 이벤트를 통해 텍스트 영역의 입력을 모니터링하는 원리는 동일합니다. 마우스 오른쪽 버튼을 붙여넣는 것을 방지합니다. 이러한 이유로 텍스트 영역의 단어 수를 실제로 제한해야 한다면 웹 페이지에 또 다른 잠금을 추가해야 합니다. 마우스 오른쪽 버튼을 비활성화하면 의심할 여지 없이 추가 비용이 발생합니다. 웹 페이지 작성자에게도 문제가 될 수 있습니다. 실제로 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>