Question

我有一个textarea（#stamptext），一个预览区域#stamptextbox）和一个名为span #stamptextbox的{{1}}。< / p>

当#previewtext达到#stamptext的像素宽度时，我需要阻止进一步进入#previewtext。

我不能按字符数限制。

我知道如何测试条件（请参阅下面的代码），但不知道如何阻止进一步进入#stamptextbox。

非常感谢任何输入。

textarea

编辑用户需要能够在达到限制后从框中删除文本，而不是添加更多内容。我应该明白这一点。

Answer 1

为其指定disabled属性，设置为true：

$(this).prop('disabled', true);

这不会阻止用户删除他们添加的内容吗？不可否认，我没有说清楚这是必要的。

在这种情况下，您可以将maxlength属性设置为当前在文本框中保留的字符数：

$(this).attr('maxlength', $(this).val().length);

请注意，当您的removeAttr('maxlength')声明条件不满足时，您希望使用maxlength删除if属性。

演示

此演示显然不会执行您的代码所做的事情，但它会说明这会阻止用户在满足某个条件后在textarea中输入更多文本。请注意，我已使用input事件而不是keyup事件，因为这会处理更多文本输入案例（即通过上下文菜单粘贴文本不会触发{\ n} { {1}}）。

在您的代码中，keyup值将动态确定，但在此我使用固定长度检查字符数（maxlength）。

＆＃13;

$(function() {
  $('textarea').on('input', function() {
    var len = $(this).val().length;
    
    if (len == 10)
      $(this).attr('maxlength', len);
  });
});

＆＃13;

Answer 2

使用event.preventDefault();，如下所示：

$('#stamp-text').keydown(function(e){
    var code = e.keyCode || e.which;
    if($('#previewtext').width() >= $("#stamptextbox").width() && code != 8
        && code != 46) //delete or backspace
        e.preventDefault();
});

一旦达到另一个元素的像素宽度，如何防止输入文本区域？

2 个答案:

演示