텍스트 영역에 대한 기능 감지 newlength가 포함 된 maxlength

Question

well-documented 다른 브라우저는 maxlength와 관련하여 텍스트 영역에서 줄 바꿈을 다르게 처리합니다. 예를 들어 개행을 사용하는 경우 아래의 스 니펫은 Chrome과 Firefox에서 다르게 작동합니다.

내 문제는 사용자가 줄 바꿈을 입력 할 수있게해야하며 왼쪽에 얼마나 많은 문자가 있는지 표시해야한다는 것입니다. 브라우저 유형을 감지 할 수는 있지만 그 것이 약하고 알려진 반 패턴입니다. 이 작업을 제대로 수행하기 위해 기능 감지 기능을 사용할 수 있습니까? 아니면 여전히 최대 길이를 피해야합니까? 제 질문은 jQuery에만 국한된 것이 아니라는 점에 유의하십시오. 예제에서 단순화를 위해 jQuery를 사용했습니다. maxlength가없는 해결 방법에 대한 예제가 있지만 (아래 참조) jquery 해킹을 사용하지 않으려는 ember와 같은 프레임 워크에서는 잘 해석되지 않습니다.

최대 길이 문제 (최대 길이 해결없이 적어도 하나의 줄 바꿈

$('.t').on('input',function(){ 
 
    $('.x').html($('.t').val().length); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class="t" rows=3 maxlength=10></textarea> 
 
<br> 
 
chars typed: <span class="x"></span>

(총 파이어 폭스, 크롬으로 시도하고 입력)

$('.t').on('input', function(){ 
 
    let maxLength = 10; 
 
    let val = $('.t').val(); 
 
    $('.t').val((val && val.length) ? val.substring(0,maxLength) : val); 
 
    $('.x').html($('.t').val().length); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class="t" rows=3></textarea> 
 
Chars typed: <span class='x'></span>

Answer 1

당신이 할 수있는 keydown과 01을 사용하십시오.새 줄 문자를 빈 문자열로 바꿀 이벤트와 정규 표현식. maxLength에 도달하면 keydown 경우에보다 형식에 새로운 캐릭터를 억제하고, keyup 이벤트의 문자 수는 왼쪽 표시 :

var maxLength = 10; 
 
var navKeys = [8,46,27,38,40,33,34,13,37,39]; 
 
$(".x").html(maxLength); 
 
$("textarea") 
 
    .on("keydown", function(e){ 
 
    // Get value without new lines 
 
    var val = $(this).val().replace(/\n|\r/g, ""); 
 

 
    // Allow nav keys 
 
    if(navKeys.indexOf(e.keyCode) !== -1) { 
 
     return true; 
 
    } 
 

 
    // Do not allow type in another char 
 
    if(val.length >= maxLength) { 
 
     e.preventDefault(); 
 
     return; 
 
    } 
 
    }) 
 
    .on("keyup", function(e) { 
 
    // Get value without new lines 
 
    var val = $(this).val().replace(/\n|\r/g, ""); 
 
    $(".x").html(maxLength - val.length); 
 

 
    // Check the max length 
 
    if(val.length > maxLength) { 
 
     $(this).val(val.substr(0,maxLength)); 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea></textarea> 
 
<br/> 
 
chars typed: <span class="x"></span>

이것은 또한 FF에서 나를 위해 일한과 Chrome에서.

Answer 2

나는 당신이 자신의 maxLength를 구현하는 것이 최선의 선택이라고 생각한다. 이 같은 뭔가 : 당신이 10 자에 도착하면

var element = document.getElementById('textarea'), 
 
    maxLength = 10; 
 

 
var trim = function() { 
 
    if(element.value.length >= maxLength) { 
 
    element.value = element.value.substring(0, maxLength); 
 
    } 
 
}; 
 

 
// for older IE 
 
element.onkeydown = function() { 
 
    setTimeout(trim, 1); 
 
}; 
 
// browser support: CH, IE 9+, FF 4.0, SF 5.0, OP 
 
element.oninput = trim;

<textarea rows="3" id="textarea"></textarea>