Javascript在特定值长度后添加Sign

Question

我想在写作时在输入文本字段中添加一个符号，

如果该字段延伸20个符号/字母。

我如何完成此

到目前为止，我试过这个：

    (function(i){
        $('#input-chapter-name' + i).change(function(){
            if($(this).val().length() > 20) {
                $(this).val($this.val() + '<br>');
            }
        })
    }(i))

因此我在控制台中收到此错误：

  

未捕获的TypeError :(中间值）（...）不是函数（...）

Answer 1

创建如下内容：

HTML

<label>+</label><input type="number">

CSS

input {
  padding-left: 20px;
}
label {
  position: relative;
  left: 15px;
}

它看起来像：

JsFiddle：https://jsfiddle.net/jshacker/w53kkrh8/

你需要的是，css类，以便你可以在长度增加一定限度时添加它。按照艾哈迈德的回答。

另外，在接受20位数字时请注意：

号码大小有问题。 JavaScript编号的长度不能为20位。你必须使用字符串来表示大数字。

Answer 2

您需要检查输入值长度而不是元素长度：

(function(i){
        if($('#input-name' + i).val().length > 20) {
            $('#input-name' + i).val($('#input-chapter-name').val() + '<br>');
        }
    }(i))

Answer 3

下面是一个通用实现，它将根据当前长度

在字段上添加/删除一个类

HTML

<input type="text" warn-max-length="20" />

的JavaScript

$(function(){
  $('[warn-max-length]').on('change', function() {
     var $this = $(this);
     var max = $this.attr('warn-max-length');

     // toggle 'max-length-exceeded' class
     $this[$this.val().length >= max ? 'addClass' : 'removeClass']('max-length-exceeded');
  })
})

亮点

• 使用on input代替keyup/keydown事件监听器来处理复制/粘贴案例

• 尽可能管理CSS中的UI更改，例如input.warn-max-length { color: red; }