改行でのテキスト領域maxlengthの機能検出

Question

well-documented異なるブラウザでは、maxlengthに関して異なるテキスト領域の改行を扱います。たとえば、下のスニペットは、改行を使用する場合、ChromeとFirefoxの動作が異なります。

私の問題は、ユーザーが改行を入力できるようにする必要があり、残りの文字数を表示する必要があるということです。私はブラウザの種類を検出できますが、それは脆く、既知の反パターンです。これを正しく行うために機能の検出を使用する方法はありますか？それとも、私はまだ最大長を避けるべきですか？私の質問はjQuery特有の問題ではないことに注意してください。単純化のためにjQueryを使用しました。 maxlengthのない回避策の例がありますが（下記参照）、jqueryハックの使用を避けたいemberのようなフレームワークではうまく翻訳されません。

MAXLENGTHの問題（MAXLENGTH回避策がなければ少なくとも一つの改行

$('.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>

（総額のFirefox、Chromeでみてください、と入力します）

$('.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

することができます​​と01を使用してくださいすべての改行文字を空の文字列に置き換えるイベントと正規表現。 maxLengthに達したときに​​イベントよりも、タイプの新しい文字を抑制し、かつ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>