带有换行符的文本区域最大长度的特征检测答案

【问题标题】：Feature detection for text area maxlength with newlines带有换行符的文本区域最大长度的特征检测
【发布时间】：2016-08-24 14:08:28
【问题描述】：

well-documented 不同的浏览器在最大长度方面对文本区域中的换行符的处理方式不同。例如，如果您使用换行符，下面的 sn-p 在 Chrome 和 Firefox 中的行为会有所不同。

我的问题是我需要允许用户输入换行符，并且我需要向他们展示他们还剩下多少个字符。我可以检测到他们的浏览器类型，但这很脆弱并且是一种已知的反模式。有没有办法使用特征检测来正确地做到这一点？还是我仍然应该避免使用 maxlength？请注意，我的问题不是特定于 jQuery 的，我只是在示例中使用了 jQuery，以便简单地展示正在发生的事情。请注意，我已经有一个没有 maxlength 的解决方法示例（见下文），但它不能很好地跨框架（如您希望避免使用 jquery hack）的 ember 进行转换。

Maxlength 问题（尝试使用 Firefox、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>

没有 maxlength 解决方法（总）

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

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以使用keydown 和keyup 事件和正则表达式将所有换行符替换为空字符串。比在keydown 事件中在达到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 中都有效。

【讨论】：

当你达到 10 个字符时，你不能再使用退格了
也不会阻止粘贴一百万个字符。
我让它尽可能简单，不处理backspace、delete 等导航键。如果你愿意，我可以将它添加到示例中。粘贴也没有问题，只需使用检查 maxLength 的相同处理程序处理另一个事件。我也应该将它添加到示例中吗？
我已更新示例以允许导航键。希望它会有所帮助。

【解决方案2】：

我认为最好的选择是实现自己的 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;

&lt;textarea rows="3" id="textarea"&gt;&lt;/textarea&gt;

【讨论】：