js-仿微博输入框字数检测

js-仿微博输入框字数检测

 

?

<span style="color: rgb(51, 51, 0);">/*

暂时不支持鼠标复制检测，但可以通过设置定时器或者blur的时候检测

*/

function TextNumCheck(elem) {

    this.elem = document.getElementById(elem);

}

TextNumCheck.prototype = {

    //跨浏览器获取文本

    text:function (obj, string) {

        return obj.innerText ? obj.innerText = string : obj.textContent = string;

    },

    //动画变色

    animBg:function (obj) {

        setTimeout(function () {

            obj.style.backgroundColor = "#fe9900";

            setTimeout(function () {

                obj.style.backgroundColor = "#fff";

            }, 150);

        }, 250);

    },

    /**

     * /检测已经输入多少字符

     * @param alrElem 要显示输入多少字符的元素id

     * @return {*}

     */

    curNum:function (alrElem) {

        var obj = document.getElementById(alrElem);

        var s = this.elem.value.length;

        this.text(obj, s);

        return this;

    },

    /**

     * 检测剩余多少字符

     * @param remainELem 要显示剩余字符的元素id

     * @param maxNum

     */

    numRemain:function (remainELem, maxNum) {

        var obj = document.getElementById(remainELem);

        var _thisElem = this.elem;

        var s = _thisElem.value.length;

        if (typeof maxNum === "undefined") {

            maxNum = 500;

        }

        var remain = maxNum - s;

        if (remain < 0) {

            _thisElem.value = _thisElem.value.substring(0, maxNum);

            this.animBg(_thisElem);

        }

        this.text(obj, remain);

        return this;

    }

};

var txtNumCheck = new TextNumCheck("cErr_con");

document.getElementById("cErr_con").onkeyup = function () {

    txtNumCheck.curNum("lim_alreay").numRemain("lim_remain");

};

</span>