在文本框中输入过程触发的事件（html）

做一个可以再输入框中时触发的事件，
案例：
输入框的应用。

代码：

HTML部分：

<div class="layout__panel layout__panel--articletitle-bar" style="width: 100%; height: 56px; overflow:!important visible;  ">
        <div class="article-bar flex flex--row flex--align-center">
            <div class="article-bar__input-box"><input maxlength="100" placeholder="输入文章标题" name="TravelInformationTitle" class="article-bar__title article-bar__title--input text-input"> <span class="article-bar__number"><span class="">0</span>/100</span></div> <div class="article-bar__user-box flex flex--row">
                <button type="submit" class="btn btn-publish  layui-btn" lay-submit="" lay-filter="demo1">发布文章</button>
            </div>
        </div>
    </div>

js部分：

 $(".article-bar__title").keyup(function () {

        var len = $(this).val().length;
        if (len >= 100) {
            alert("文章最大长度只能为100");
            return false;
        }
        $(".article-bar__number").find("span").text(len);
        console.log(len);
    })

实现效果如下：

可以看到，当我们输入内容时，数字在变化。