用换行符对文本区域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进行特征检测

回答

相关问题