用換行符對文本區域maxlength進行特徵檢測

這是well-documented不同的瀏覽器對文本區域中的換行符用maxlength來區別對待。例如，如果您使用換行符，則下面的代碼段在Chrome和Firefox中的行爲會有所不同。用換行符對文本區域maxlength進行特徵檢測

我的問題是，我需要允許用戶輸入換行符，我需要向他們顯示他們剩下的字符數。我可以檢測到他們的瀏覽器類型，但這很脆弱，並且是一種已知的反模式。有沒有辦法使用功能檢測來正確執行此操作？或者我還應該避免maxlength？請注意，我的問題不是jQuery特有的，爲了簡單起見，我僅在示例中使用了jQuery。請注意，我已經有一個沒有maxlength的解決方法的例子（見下文），但是它不能很好地跨越像你想避免使用jquery hack的ember這樣的框架。

MAXLENGTH問題（嘗試用火狐，Chrome和類型的至少一個換行符

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

來源

2016-08-24 AlexMA

你可以使用和keyup事件和正則表達式將用空字符串替換所有新行字符。比事件抑制型，在新的角色達到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中。

來源

2016-08-24 14:37:23 xxxmatko

當你到10個字符，則無法使用回退了 – AlexMA

也不會阻止粘貼在一萬字。 – AlexMA

我使它儘可能簡單，不需要像'backspace'，'delete'等處理導航鍵。如果你想我可以將它添加到樣本中。同樣粘貼也不是問題，只要用同一個處理程序處理另一個事件來檢查maxLength。我是否也應該將它添加到樣本中？ – xxxmatko

我認爲最好的選擇是你實現你自己的maxLength。事情是這樣的：

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>

來源

2016-08-24 16:47:59 jcbp

用換行符對文本區域maxlength進行特徵檢測

回答

相關問題