一个小小的控制输入字数的方法

Posted 2020-06-23 寒xiao纪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个小小的控制输入字数的方法相关的知识，希望对你有一定的参考价值。

写给朋友用的，回调提供剩余字符

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        .out{
            background-color: #ccc;
            opacity: 0;
            filter:alpha(opacity=0);
            position: relative;
            z-index: 3
        }
        .out img{
            position: relative;
        }
    </style>
</head>
<body>
    <input type="text" class="limit" />

    <div class="out">
        <img src="http://172.16.102.228:3000/images/html/ac_game/ac_game_pair_back_answer1.png" />
        <img src="http://172.16.102.228:3000/images/html/ac_game/ac_game_pair_back_base.png" />
    </div>

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
;(function($){
    $.fn.maxLimit = function(options){
        var defaults = {
            max : 11,
            callback : null
        },
        configs = $.extend({},defaults,options),
        self = this,
        max = configs.max,
        callback = configs.callback,
        _length,
        Val,
        getLength = function(x){
            // 中文算2个字符
            return x.replace(/[^\x00-\xf]/g,"xx").length;
        }
        
        self.on("input propertychange",function(){
            var val = self.val(),
                length = getLength(val);

            if(length > max){
                self.val(Val);
            }else{
                Val = val;
            }

            if(typeof callback == "function"){
                callback.call(null, max - getLength(Val) );
            }
        });
        
    }
})(jQuery);

$(".limit").maxLimit({
    max : 7,
    callback : function(l){
        console.log(l);
    }
});
</script>
</body>
</html>

以上是关于一个小小的控制输入字数的方法的主要内容，如果未能解决你的问题，请参考以下文章

textarea文本域字数控制---并显示已输入字数

Android 系统搜索框如何限制输入字数长度？

JavaScript 实现textarea限制输入字数，输入框字数实时统计更新，输入框实时字数计算移动端bug解决

ios开发之--实现TextView提示文字并且输入字数限制

Laravel：如何在控制器的几种方法中重用代码片段

兼顾pc和移动端的textarea字数监控的实现方法