textarea_javascript 기술의 maxlength 속성의 이상한 동작에 대한 자세한 설명

HTML5는 오늘 이야기할 maxlength와 같은 형식에 많은 변화를 가져왔습니다. 이 속성은 입력 상자에 입력되는 최대 문자 수를 제한할 수 있다는 점에서 더 편리합니다. 문자 수에 따라 자동으로 잘립니다.

최근 사용자 입력을 최대 600자(한자와 문자 구분 불가)로 제한해달라는 요청을 받았는데, 붙여넣은 내용도 600자를 입력하면 자동으로 잘려서 입력이 되지 않습니다.

제가 가장 먼저 생각한 것은 maxlength였습니다. 이는 기본적으로 요구 사항을 충족하지만 여전히 이상한 동작이 있습니다.

아래 코드를 보세요:

<textarea name="text" id="text" maxlength="600"></textarea>
<p><span id="already"></span>/<span>600</span></p>
text.oninput = function() {
  already.textContent = text.value.length;
}

위 코드는 입력 문자 수를 600개로 제한하고 oninput을 통해 사용자 입력을 모니터링합니다. keydown은 사용자 키보드 입력만 모니터링할 수 있고 붙여넣기에 응답하지 않기 때문에 Keydown은 사용되지 않습니다. . . oninput이 그것을 할 수 있습니다.

이때 600자를 직접 입력한 후에는 더 이상 입력할 수 없습니다. 일부를 삭제하고 일부를 다시 입력하면 정상적으로 실행됩니다. 이상한 점은 텍스트 영역에 많은 양의 텍스트를 붙여 넣으면 maxlength가 존재하기 때문에 자동으로 잘린다는 것입니다. 이때 텍스트 영역에는 일부 문자를 삭제하면 정확히 600자가 있습니다. 그런 다음 다시 입력을 시도하면 다음을 찾을 수 있습니다.

젠장, 타자를 못 쳐요! ! ! 더 삭제하면 계속 입력할 수 있지만! ! ! 600자 미만으로 입력했는데 갑자기 다시 입력이 안되네요! ! !

이 문제는 Chrome과 Android 기기에서 발생합니다. . 그 이유는 아직 알려지지 않았습니다. 입력을 테스트한 후에는 이러한 상황이 발생하지 않으며, maxlength 속성의 값이 10과 같이 더 작은 경우에는 이러한 상황이 발생하지 않습니다. . .

이 경우 maxlength는 신뢰할 수 없습니다. oninput은 매우 유연하므로 더 많은 코드를 작성하세요.

코드를 수정하고, 텍스트 영역의 maxlength 속성을 제거하고, 입력을 사용하여 텍스트 영역의 값을 모니터링하세요. 600을 초과하면 자동으로 잘려서 입력이 불가능하다는 착각을 불러일으킵니다.

text.oninput = function() {
  if(text.value.length >= 600) {
    text.value = text.value.substr(0,600);
  }
  already.textContent = text.value.length;
}

걱정하지 않으신다면 계속해서 키다운 이벤트를 모니터링하여 600자 이상 입력 후 기본 이벤트를 방지할 수 있습니다. 하지만 금지할 수 없는 키가 몇 가지 있습니다: 백스페이스 삭제 및 캐리지 리턴:

text.onkeydown = function() {
  if(text.value.length >= 600) {
    // 删除:46 退格:8 回车:13
    if (!(e.which == '46' || e.which == '8' || e.which == '13')) {
      e.preventDefault();
    }
   }
}

IE8 이하는 maxlength 속성이나 oninput을 지원하지 않지만 onpropertychange라는 더 강력한 방법이 있습니다.

다음은 텍스트 영역이 코드의 한쪽 끝을 통해 maxlength 속성을 구현하는 방법을 설명합니다

<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); 
} 
</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)">
   </textarea> 
</form>