Question

well-documented不同浏览器在处理文本区域中的换行方式与maxlength有所不同。例如，如果您使用换行符，则下面的代码段在Chrome与Firefox中的行为会有所不同。

我的问题是我需要允许用户输入换行符，我需要向他们展示他们剩下多少个字符。我可以检测到他们的浏览器类型，但这很脆弱，是一个已知的反模式。有没有办法使用功能检测正确执行此操作？或者我还应该避免maxlength吗？请注意，我的问题不是jQuery特定的，我只是在我的示例中使用jQuery，以简化显示正在发生的事情。请注意，我已经有一个没有maxlength的解决方法的例子（见下文），但它不能在像你想避免使用jquery hacks的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>

Answer 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。

Answer 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;

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

使用换行符对文本区域maxlength进行特征检测

2 个答案: