JavaScript를 사용하여 HTML의 textArea에 maxlength를 부과하는 방법

116

내가 작성하면 몇 가지 기능을 갖고 싶습니다.

<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></textarea>

textArea에 자동으로 maxlength를 적용합니다. 가능하면 jQuery에서 솔루션을 제공하지 마십시오.

참고 : 다음과 같이하면이 작업을 수행 할 수 있습니다.

<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50">

function imposeMaxLength(Event, Object, MaxLen)
{
    return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40))
}

에서 복사 된 HTML 텍스트 영역에서 HTML 입력 "최대 길이"속성을 에뮬레이션하는 가장 좋은 방법은 무엇입니까?

하지만 요점은 textArea를 선언 할 때마다 onKeyPress 및 onKeyUp을 작성하고 싶지 않다는 것입니다.

javascript  html  textarea 
— Rakesh Juyal
소스
4
텍스트 영역의 maxlenth는 html5에 있습니다. 현재 Chrome에서는 작동하지만 Firefox에서는 작동하지 않습니다.
— 데이브

답변:

113 
window.onload = function() { 
  var txts = document.getElementsByTagName('TEXTAREA'); 

  for(var i = 0, l = txts.length; i < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { 
      var func = function() { 
        var len = parseInt(this.getAttribute("maxlength"), 10); 

        if(this.value.length > len) { 
          alert('Maximum length exceeded: ' + len); 
          this.value = this.value.substr(0, len); 
          return false; 
        } 
      }

      txts[i].onkeyup = func;
      txts[i].onblur = func;
    } 
  };

}
— 조쉬 스토 돌라
소스
3
Josh는 작동 할 것 같지만이 일이 무엇을하는지 설명해 주시겠습니까 --- if (/ ^ [0-9] + $ /. test (txts [i] .getAttribute ( "maxlength"))) {- -
— 케쉬 Juyal
2
거래가 무엇인지 기억 나는 것 같습니다. FF 또는 IE (FF라고 생각합니다)는 Javascript가 "value"속성을 확인할 때 양식이 게시 될 때 서버로 다시 보내는 것과 다른 문자열을 반환합니다! 줄 바꿈이 캐리지 리턴 문자를 삽입하는 방법 /하지 않는 방법과 관련이 있습니다. 클라이언트 및 서버 측에서 디버그 코드를 사용하면 쉽게 알아낼 수 있습니다.
— Pointy 2010-04-30
7
경고의 순서와 자르기 값을 바꿨습니다. 원래 순서에서는 onkeyup이 경고하여 컨트롤이 초점을 잃고 필드가 아직 잘리지 않았기 때문에 onblur가 실행됩니다.
— GalacticCowboy
1
@JoshStodola- onblur사용자가 텍스트 영역을 클릭 할 때까지 붙여 넣기를 처리하지 않습니다. onkeyup컨텍스트 메뉴 또는 브라우저 메뉴를 통해 수행되는 경우 붙여 넣기를 처리하지 않습니다. 이 방법은 붙여 넣기를 위해 스크리닝 할 필요가없는 경우에 작동합니다. 타이머 기반 접근 방식에 대한 답변 참조 stackoverflow.com/a/10390626/1026459
— Travis J
3
@JoshStodola-정말 할 수 없습니다. 텍스트 영역에 전체 내용을 붙여넣고 제출을 클릭 한 후 응답없이 일부만 처리되는 것을 본다면 사용자로서 정말 짜증이 날 것입니다.
— Travis J
80

jQuery를 피하고 싶지만 솔루션에 JavaScript가 필요하므로이 솔루션 (jQuery 1.4 사용)이 가장 간결하고 강력합니다.

영감을 얻었지만 Dana Woodman의 답변보다 개선되었습니다.

그 대답의 변경 사항은 다음과 같습니다 .jQuery.live를 사용하고 길이가 정상이면 val을 설정하지 않는 단순화되고 더 일반적입니다 (IE에서 작동하는 화살표 키로 이어지고 IE에서 눈에 띄는 속도 향상).

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').live('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    // Trim the field if it has content over the maxlength.
    if (val.length > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});

편집 : 대신 사용 하는 jQuery 1.7+ 용 업데이트 버전onlive

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').on('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    // Trim the field if it has content over the maxlength.
    if (val.length > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});
— 에이 릭여
소스
1
라이브의 사용과 같은 멋진 에이 릭.
— Dana Woodman
5
live ()에서 버그를 발견했고 jQuery는 그 이후로 더 이상 사용하지 않았습니다. 대신 on ()을 사용하십시오. 이유가 궁금하다면 : britishdeveloper.co.uk/2012/04/…
— BritishDeveloper
6
하지만 중간에서 편집하면 새 캐릭터가 아닌 마지막 캐릭터가 죽을 것입니다.
— Joe Mabel
6
네 on ()을 사용했고 보석처럼 작동합니다. 감사. 여기에 수정되고 약간 수정 된 바이올린이 있습니다 : jsfiddle.net/nXMqc
— B-Money
6
슬라이싱의 문제점은 중간에 문자를 입력하면 삽입되고 문자열이 끝에서 잘리는 것입니다. 전체 텍스트가 한 번에 표시되지 않으면 혼란 스러울 수 있습니다. 또한 val (..) 함수를 사용하여 값을 변경하면 커서가 문자열의 끝으로 이동하는 것처럼 보입니다. (피들에서 최신 브라우저로이를 테스트하려면 maxlength 속성을 제거해야합니다. 그렇지 않으면 브라우저가 제한을 적용합니다).
— Juha Palomäki
33

업데이트 Eirik의 솔루션 .live()은 좀 더 강력하므로 대신 사용하십시오 .

jQuery를 사용하지 않는 솔루션을 원했지만 Google을 통해이 페이지를 찾고 jQuery와 같은 솔루션을 찾는 모든 사람을 위해 하나를 추가 할 것이라고 생각했습니다.

$(function() {        
    // Get all textareas that have a "maxlength" property.
    $('textarea[maxlength]').each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field.
        var maxlength = $textarea.attr('maxlength');
        var val = $textarea.val();

        // Trim the field if it has content over the maxlength.
        $textarea.val(val.slice(0, maxlength));

        // Bind the trimming behavior to the "keyup" event.
        $textarea.bind('keyup', function() {
            $textarea.val($textarea.val().slice(0, maxlength));
        });

    });
});

Google 직원에게 유용하기를 바랍니다.

— 다나 우드맨
소스
1
keyup 바운드 함수는 다음과 같아야합니다. $ (this) .val ($ (this) .val (). slice (0, maxlength));
— Brian Vallelunga 2011
@brian Yup, 맞습니다. 오류를 찾아 주셔서 감사합니다.
— Dana Woodman 2011
$ (this) .val (function (i, val) {return val.slice (0, maxlength)});
— Dima Bildin 2011
줄 바꿈은 브라우저에서 1 문자, 서버에서 2 자로 계산
— 되므로이
32

HTML5는 다음 과 같이 요소에 maxlength속성을 추가합니다 textarea.

<!DOCTYPE html>
<html>
    <body>
        <form action="processForm.php" action="post">
            <label for="story">Tell me your story:</label><br>
            <textarea id="story" maxlength="100"></textarea>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

이것은 현재 Chrome 13, FF 5 및 Safari 5에서 지원됩니다. 당연히 IE 9에서는 지원되지 않습니다. (Win 7에서 테스트 됨)

— james.garriss
소스
5

이 솔루션은 텍스트 중간에 문자가 추가 될 때 마지막 문자가 제거되는 IE의 문제를 방지합니다. 다른 브라우저에서도 잘 작동합니다.

$("textarea[maxlength]").keydown( function(e) {
    var key = e.which;  // backspace = 8, delete = 46, arrows = 37,38,39,40

    if ( ( key >= 37 && key <= 40 ) || key == 8 || key == 46 ) return;

    return $(this).val().length < $(this).attr( "maxlength" );
});

내 양식 유효성 검사는 사용자가 텍스트 영역의 최대 길이를 초과하는 텍스트를 붙여 넣었을 수있는 모든 문제를 처리합니다 (IE에서는 문제인 것 같음).

— 크리스 R
소스
4

이것은 제가 방금 제 사이트에서 사용했던 일부 수정 된 코드입니다. 남은 문자 수를 사용자에게 표시하도록 개선되었습니다.

(jQuery를 요청하지 않은 OP에게 다시 한 번 죄송합니다. 근데 ​​요즘 누가 jQuery를 사용하지 않나요?)

$(function() {
    // Get all textareas that have a "maxlength" property.
    $("textarea[maxlength]").each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field
        var maxlength = $textarea.attr("maxlength");

        // Add a DIV to display remaining characters to user
        $textarea.after($("<div>").addClass("charsRemaining"));

        // Bind the trimming behavior to the "keyup" & "blur" events (to handle mouse-based paste)
        $textarea.on("keyup blur", function(event) {
            // Fix OS-specific line-returns to do an accurate count
            var val = $textarea.val().replace(/\r\n|\r|\n/g, "\r\n").slice(0, maxlength);
            $textarea.val(val);
            // Display updated count to user
            $textarea.next(".charsRemaining").html(maxlength - val.length + " characters remaining");
        }).trigger("blur");

    });
});

국제 멀티 바이트 문자로 테스트되지 않았으므로 정확히 어떻게 작동하는지 모르겠습니다.

— 사이먼 이스트
소스
2

또한 텍스트 영역에 붙여 넣기를 처리하려면 다음 이벤트를 추가하십시오.

...

txts[i].onkeyup = function() {
  ...
}

txts[i].paste = function() {
  var len = parseInt(this.getAttribute("maxlength"), 10);

  if (this.value.length + window.clipboardData.getData("Text").length > len) {
    alert('Maximum length exceeded: ' + len);
    this.value = this.value.substr(0, len);
    return false;
  }
}

...
— Stusherwin
소스
누군가가 괜찮다고 생각하면 답안 본문에 이것을 추가 할 수 있습니까? 아직 할 포인트가 충분하지 않습니다.
— stusherwin
붙여 넣기 기능은 표준화되지 않았습니다. IE에서만 작동한다고 생각합니다.
— Josh Stodola
붙여 넣기 상황을 처리하기 위해 답변을 업데이트했습니다. 감사합니다!
— Josh Stodola
2

maxlength 속성은 Internet Explorer 10, Firefox, Chrome 및 Safari에서 지원됩니다.

참고 :<textarea> 태그 의 maxlength 속성은 Internet Explorer 9 및 이전 버전 또는 Opera에서 지원되지 않습니다.

에서 HTML의 최대 길이 속성 w3schools.com

IE8 또는 이전 버전의 경우 다음을 사용해야합니다.

//only call this function in IE
function maxLengthLimit($textarea){
    var maxlength = parseInt($textarea.attr("maxlength"));
    //in IE7,maxlength attribute can't be got,I don't know why...
    if($.browser.version=="7.0"){
        maxlength = parseInt($textarea.attr("length"));
    }
    $textarea.bind("keyup blur",function(){
        if(this.value.length>maxlength){
            this.value=this.value.substr(0,maxlength);
        }
    });
}

추신

<input>태그 의 maxlength 속성은 모든 주요 브라우저에서 지원됩니다.

에서 HTML의 최대 길이 속성 w3schools.com

— Eason
소스
1

텍스트 영역의 값을 트리밍하는 것에 비해 더 나은 솔루션입니다.

$('textarea[maxlength]').live('keypress', function(e) {
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    if (val.length > maxlength) {
        return false;
    }
});
— Bharat
소스
1

jQuery를 사용하여 쉽고 명확하게 만들 수 있습니다.

JSFiddle 데모

<textarea id="ta" max="10"></textarea>

<script>
$("#ta").keypress(function(e){

    var k = e.which==0 ? e.keyCode : e.which;
    //alert(k);
    if(k==8 || k==37 || k==39 || k==46) return true;

    var text      = $(this).val();
    var maxlength = $(this).attr("max");

    if(text.length >= maxlength) {
        return false;   
    }
    return true;
});
</script>

그것은에서 테스트 Firefox, Google Chrome및Opera

— MaxEcho
소스
핸들러가 실행될 때 text업데이트되기 전에 texarea의 "값"이 채워지는 것이 두렵습니다. 이는 테스트가 if( text.length +1 > maxlength) {return false;}. 그렇지 않으면 maxlength - 1내부 에 문자 만 넣을 수 있습니다:/
— Stphane 2015-06-03
바이올린을 사용하면 사용자가 문자를 하나 더 입력 할 수 있습니다. IMO, 테스트는해야 하나 if(text.length+1 > maxlength)또는 if(text.length >= maxlength)...
— Stphane
내가 복사하고 콘텐츠를 붙여 넣을 때 그것의 예상대로 작동하지
— 란 지트 쿠마르
0

위 코드의 작은 문제는 val ()이 change () 이벤트를 트리거하지 않는다는 것이므로 backbone.js (또는 모델 바인딩을위한 다른 프레임 워크)를 사용하는 경우 모델이 업데이트되지 않습니다.

솔루션을 게시하고 있습니다.

$(function () {

    $(document).on('keyup', '.ie8 textarea[maxlength], .ie9 textarea[maxlength]', function (e) {
        var maxLength = $(this).attr('maxlength');
        if (e.keyCode > 47 && $(this).val().length >= maxLength) {
            $(this).val($(this).val().substring(0, maxLength)).trigger('change');
        }
        return true;
    });

});
— 알렉산더 벨 레츠 키
소스
0

최근에 maxlength동작을 구현 했으며이textarea 질문에 설명 된 문제가 발생했습니다. Chrome은 maxlength 속성을 사용하여 텍스트 영역에서 잘못된 문자를 계산합니다 .

따라서 여기에 나열된 모든 구현은 버그가 거의 없습니다. 이 문제를 해결하기 위해 .replace(/(\r\n|\n|\r)/g, "11")이전에 .length. 그리고 현을자를 때 명심하십시오.

나는 다음과 같이 끝냈다.

var maxlength = el.attr("maxlength");
var val = el.val();
var length = val.length;
var realLength = val.replace(/(\r\n|\n|\r)/g, "11").length;
if (realLength > maxlength) {
    el.val(val.slice(0, maxlength - (realLength - length)));
}

문제가 완전히 해결되는지 확실하지 않지만 지금은 저에게 효과적입니다.

— 로만 포미 노프
소스
0

IE9, FF, Chrome에서 작동하고 사용자에게 카운트 다운을 제공하는이 jQuery를 사용해보세요.

$("#comments").bind("keyup keydown", function() {
    var max = 500;
    var value = $(this).val();
    var left = max - value.length;
    if(left < 0) {
        $(this).val( value.slice(0, left) );
        left = 0;
    }
    $("#charcount").text(left);
}); 

<textarea id="comments" onkeyup="ismaxlength(this,500)"></textarea>
<span class="max-char-limit"><span id="charcount">500</span> characters left</span>
— 레슬리 킹
소스
0

이 코드 예제를 사용해보십시오.

$("#TextAreaID1").bind('input propertychange', function () {
    var maxLength = 4000;
    if ($(this).val().length > maxLength) {
        $(this).val($(this).val().substring(0, maxLength));
    }
});
— Naveen
소스
-1

이것은 훨씬 쉽습니다.

<textarea onKeyPress="return ( this.value.length < 1000 );"></textarea>
스 니펫 확장

— Erdomester
소스
2
이 솔루션은 maxlength원하는 길이보다 긴 문자열을 붙여 넣을 수 있으므로 완전히 복제되지 않습니다 .
— Chris Bier 2015
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.