監(jiān)聽文本框輸入開發(fā)仿新浪微博限制輸入字數(shù)的textarea插件

瀚海璨夜 2017-06-08

展開全文

Firefox,、Chrome、IE9,，IE10 均支持 oninput 事件,，此外所有版本的 IE 均支持 onpropertychange 事件。

oninput 事件在用戶輸入,、退格（backspace）,、刪除（delete）、剪切（ctrl + x）,、粘貼（ctrl + v）及鼠標剪切與粘貼時觸發(fā)（在 IE9 中只在輸入,、粘貼、鼠標粘貼時觸發(fā)）,。

onpropertychange 事件在用戶輸入,、退格（backspace）、刪除（delete）,、剪切（ctrl + x）,、粘貼（ctrl + v）及鼠標剪切與粘貼時觸發(fā)（在 IE9 中只在輸入、粘貼,、鼠標粘貼時觸發(fā)）（僅 IE 支持）,。

backspace、delete 兩個按鍵的 keyCode 分別為 8,、46,。

oncut 事件在粘貼（ctrl + v）、鼠標粘貼時觸發(fā)。

var input = document.getElementById("test");
    function fn() {
        console.log(input.value.length) // 你要執(zhí)行的代碼
    }
    
    if (window.addEventListener) { //先執(zhí)行W3C
        input.addEventListener("input", fn, false);
    } else {
        input.attachEvent("onpropertychange", fn);
    }
    if (window.VBArray && window.addEventListener) { //IE9
        input.attachEvent("onkeydown", function() {
            var key = window.event.keyCode;
            (key == 8 || key == 46) && fn(); //處理回退與刪除
        });
        input.attachEvent("oncut", fn); //處理粘貼
    }

在上面的代碼中,，可以看到,，在JS中有oninput這樣的事件，文本框的輸入,、退格,、空格、粘貼等操作均能觸發(fā),，利用這個事件就可以動態(tài)捕捉用戶的輸入情況,。記得以前做動態(tài)監(jiān)測輸入，都是用onkeydown或onkeyup,，太土了,，現(xiàn)在直接用這個吧。當代IE的兼容問題已經(jīng)在上面的代碼中解決了,，那么我們之接就可以拿來使用了,；

利用oninput事件，我們可以開發(fā)一款限制textarea字數(shù)的插件,，像新浪微薄發(fā)表微薄的時候,，就有字數(shù)的限制；

開發(fā)這個插件其實相當簡單,，就是對輸入的字數(shù)進行一下統(tǒng)計,，如果超出了就進行提示，直接看代碼：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery插件——仿新浪微博限制輸入字數(shù)的textarea</title>
<script src="http://apps./libs/jquery/1.10.1/jquery.min.js"></script>
<style>
    *{padding: 0;margin: 0;}
    .box{width: 800px;margin: 0 auto;}
    #test{border:1px solid #d9d9d9; padding:0 1%;line-height: 1.8;font-family: "microsoft yahei";font-size: 14px;display: block; width: 98%; height: 80px;;}
    #info{padding: 3px 0;font-family: "microsoft yahei";font-size: 14px;}
</style>
</head>
<body>
<div class="box">
    <textarea id="test" width="100%"></textarea>
</div>
<script>
    (function($) {
        $.fn.limitTextarea = function(opts) {
            var defaults = {
                maxNumber: 140, //允許輸入的最大字數(shù)
                position: 'top', //提示文字的位置,，top：文本框上方，bottom：文本框下方
                onOk: function() {}, //輸入后,，字數(shù)未超出時調(diào)用的函數(shù)
                onOver: function() {} //輸入后,，字數(shù)超出時調(diào)用的函數(shù)   
            }
            var option = $.extend(defaults, opts);
            this.each(function() {
                var _this = $(this);
                var info = '<div id="info">還可以輸入<b>' + (option.maxNumber - _this.val().length) + '</b>字</div>';
                var fn = function() {
                    var $info = $('#info');
                    var extraNumber = option.maxNumber - _this.val().length;
                    
                    if (extraNumber >= 0) {
                        $info.html('還可以輸入<b>' + extraNumber + '</b>個字');
                        option.onOk();
                    } else {
                        $info.html('已經(jīng)超出<b style="color:red;">' + (-extraNumber) + '</b>個字');
                        option.onOver();
                    }
                };
                switch (option.position) {
                    case 'top':
                        _this.before(info);
                        break;
                    case 'bottom':
                    default:
                        _this.after(info);
                }
                //綁定輸入事件監(jiān)聽器
                if (window.addEventListener) { //先執(zhí)行W3C
                    _this.get(0).addEventListener("input", fn, false);
                } else {
                    _this.get(0).attachEvent("onpropertychange", fn);
                }
                if (window.VBArray && window.addEventListener) { //IE9
                    _this.get(0).attachEvent("onkeydown", function() {
                        var key = window.event.keyCode;
                        (key == 8 || key == 46) && fn(); //處理回退與刪除
                    });
                    _this.get(0).attachEvent("oncut", fn); //處理粘貼
                }
            });
        }
    })(jQuery)
    //插件調(diào)用；
    $(function() {
        $('#test').limitTextarea({
            maxNumber: 140, //最大字數(shù)
            position: 'bottom', //提示文字的位置,，top：文本框上方,，bottom：文本框下方
            onOk: function() {
                $('#test').css('background-color', 'white');
            }, //輸入后，字數(shù)未超出時調(diào)用的函數(shù)
            onOver: function() {
                $('#test').css('background-color', 'lightpink');
            } //輸入后,，字數(shù)超出時調(diào)用的函數(shù),，這里把文本區(qū)域的背景變?yōu)榉奂t色   
        });
    });
</script>
</body>
</html>