自适应高度的textarea字数统计插件

主要功能

1. 自动更新字数统计显示位置随着你的输入.

2. 接近字数上限时当前字数会标红.

3. 自动改变输入框大小随着你的输入内容.

程序入口

<sciprt src="./js/bootstrap.js"></script>

 自动执行

<sciprt src="./js/app.js"></script>

字数统计控件

<sciprt src="./js/word-count-control.js"></script>

实例代码

找到`<textarea></textarea>`标签的父容器并且添加`class="word-count"`与`data-max-length="200"`.

<div class="word-count" data-max-length="300" data-will-full="20">
    <textarea></textarea>
</div>

属性说明

代码运行流程

** 文件使用顺序 bootstrap.js -> app.js -> word-count-control.js **

bootstrap.js中

当DOM结构加载完毕后执行以下的方法.

function __buildBootstrap () {
    _JM = new Demo.App();
    _JM.execute();
}

app.js

初始化`Demo`对象并且赋值空对象给`controllers`属性

var Demo = {};
Demo.App = function () {
    this.controllers = {};
};

`Demo.controllers`可以理解为一个容器, 里面存放你写的每个不同功能的模块类, 并且会自动执行一些规定的方法.

可以通过如下方法取得对应模块

Demo.App.prototype.get = function(controller) {
    return this.controllers[controller];
};

自动执行类中相应的函数方法

Demo.App.prototype.execute = function() {
    for (var className in Demo) {
        if (className !== "App") {
            // 实例化类并传入自身
            var controller = new Demo[className](this);
            this.controllers[className] = controller;
            // 执行模块的execute方法
            if (typeof controller.execute === "function") {
                controller.execute();
            }
            // 执行模块的listen方法
            if (typeof controller.listen === "function") {
                controller.listen();
            }
            // 执行模块的focus方法
            if (typeof controller.focus === "function") {
                controller.focus();
            }
            // 快捷键操作(键盘操作)
            if (typeof controller.keyboardShortcuts === "function") {
                // 获取顶层文档
                var topDocument = document;
                if (window.self != window.top) {
                    topDocument = window.parent.document;
                }
                topDocument.onkeyup = document.onkeyup = function (e) {
                    e = e || window.event;
                    controller.keyboardShortcuts(e);
                };
            }
            // 执行每个模块中以init开头的初始化函数
            if (typeof this.controllers[className].init != 'undefined') {
                for (var initName in this.controllers[className].init) {
                    this.controllers[className].init[initName]();
                }
            }
        }
    }
};

word-count-control.js

获取模块容器并保存起来

Demo.WordCountControl = function (app) {
    this.app = app;
};

初始化`init`变量

Demo.WordCountControl.prototype.init = {};

实现`listen`方法

Demo.WordCountControl.prototype.listen = function () {}

自动引入`css`样式表

Demo.WordCountControl.prototype.init['Css'] = function () {
    var headDom = document.querySelector('head');
    var wordCountCss = document.createElement('link');
    wordCountCss.setAttribute('rel', 'stylesheet');
    wordCountCss.href = './css/word-count-control.css';
    headDom.appendChild(wordCountCss);
}

初始化控件的相关代码在此不做赘述, 比较简单.

这样的写法是我在阅读一个php的开源项目时学到的, 因为本人不是很熟悉前端的一些规范/架构什么的所以理解之后直接拿过来用, 这个控件算是一个练手之作, 前端我不是掌握的很好, 如果有什么需要改进的地方可以在下方留言评论.

三个js文件也可以使用nodejs中的glup组件进行压缩使用.

在此感谢写这个开源项目的大佬, 从里面我学到很多.