2008-09-04 2 views

답변

19

TEXTAREA 태그는 MAXLENGTH이 적어도 대부분의 표준 브라우저에서, INPUT 태그가 수행하는 방식을 속성이 없습니다. 할 수있는 문자의 수를 제한하는 매우 간단하고 효과적인 방법은 TEXTAREA 태그에를 입력입니다 :

<textarea onKeyPress="return (this.value.length < 50);"></textarea> 

참고 :onKeyPress, 아무 버튼이나 누르을 방지하는 것입니다, 아무 버튼이나백 스페이스 키는입니다.

새 문자가 원하는 최대 길이 (이 예제에서는 50 개)에 추가되기 전에 부울식이 필드 길이를 과 비교하고 한 번 더 추가 할 수있는 경우 true를 반환하고, false 그렇지 않은 경우. 대부분의 이벤트에서 false를 반환하면 기본 작업이 취소됩니다. 그래서 현재 길이가 이미 50 이상인 경우 처리기는 false를 반환하고 KeyPress 작업이 취소되고 문자가 추가되지 않습니다.

연중 무휴로 비행하면 KeyPress 이벤트가 발생하지 않아이 검사를 우회하지 않고 TEXTAREA, 에 붙여 넣을 가능성이 있습니다. Internet Explorer 5 이상에는 onPaste 이벤트가 포함되어 있으며 처리기에는 수표가 포함될 수 있습니다. 그러나 합계가 으로 제한이 초과되는지 여부를 알기 위해 얼마나 많은 숫자의 문자가 클립 보드에서 대기하는지 고려해야합니다. 다행히도, IE는 윈도우 객체의 클립 보드 을 포함합니다. 따라서 1 :

<textarea onKeyPress="return (this.value.length < 50);" 
onPaste="return ((this.value.length + 
window.clipboardData.getData('Text').length) < 50);"></textarea> 

다시, onPaste 이벤트 및 clipboardData 객체는 5+ IE이다. 크로스 브라우저 솔루션의 경우 길이를 확인하고 원하는대로 처리 (값을 자동으로 자르거나 사용자에게 알리는 등)하기 위해 OnChange 또는 OnBlur 처리기를 사용해야 만합니다. 불행하게도 사용자가 필드를 떠나려고 시도 할 때만 오류가 발생하지만 이는 그리 친숙하지 않습니다.

Source

또한, 당신이 당신의 페이지에 포함 할 수있는 완성 된 스크립트를 포함하여, 여기 또 다른 방법이있다 :

http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html

+7

참고. 더 강력한 스 니펫을 사용하면 최대 한도에 도달 한 다음 백 스페이스를 사용하여 문자를 삭제하여 한도 이하로 텍스트를 가져올 수 있습니다. – shek

+0

아마 저와 저의 잘못된 arithmetics 일 수도 있지만, textareas에서 새 줄을 사용할 때 IE와 FF는 Chrome에서 'maxlength'와 다르게 동작한다는 인상을 받았습니다. '\ r \ n' 대'\ n'문제 (텍스트에 줄 바꾸기가 포함되어있을 때)와 관련이 있습니다 ... 확실히, 'maxlength'는 Windows에서 크로스 브라우저를 사용하지 않는 것으로 보입니다. ..하지만 여기에 새로운 아무것도, 그냥 같은 오래된 버기 HTML/JS 물건 ... – user2173353

5

HTML5는 이제 maxlength attribute on <textarea> 수 있습니다.

IE < = 9 및 iOS Safari 8.4를 제외한 모든 브라우저에서 지원됩니다. support table on caniuse.com을 참조하십시오.어떤 문자가 삭제 될 수 없다 - 문자 제한이 명중되면 위의 기록 된 때 onKeyPress 기능은 텍스트 영역에 입력되는 텍스트를 방지 할 수 있다는

+0

@erdomester 그것은 지원되는 브라우저에서 작동합니다. 내가 제공 한 w3c 링크에서 테스트 할 수 있습니다. – indusBull

+0

나는 그것을 시험해 보았고 maxlength = "500px"를 사용해도 작동한다. 그러나 당신이 제공 한 링크는 내가 그 주석을 게시했을 때 비활성화되어 있었고 현재 표시된 것보다 다른 속성을 보여주는 페이지가 표시되었습니다. – erdomester

+3

그 링크는 W3C가 아니며, W3Schools입니다.이 정보는 잘못된 정보를 출력하는 것으로 알려져 있습니다. – Toby

-1
$(function(){ 
    $("#id").keypress(function() { 
    var maxlen = 100; 
if ($(this).val().length > maxlen) { 
    return false; 
} 
}) 
}); 

참조 Set maxlength in Html Textarea