javascript - 如何在 textarea 中为不同的语言设置不同的 maxLength

Question

我有一个文本区域，用户可以在其中输入英文或中文，或两者兼而有之。 maxLength="50"英文很好，但我希望将汉字限制在20个。如果是混合的情况，也应该限制在20个。不知道我该怎么做？

Answer 1

jQuery解决方案？

jQuery

$(function(){
    $("#textarea").on("keydown change", function(e){
        if (e.keyCode == 8)
            return;
        var x = $(this).val();
        if (x.match(/[\u3400-\u9FBF]/) && x.length >= 20) {
            e.preventDefault();
            $(this).val(x.substring(0,20));
        } else if (x.length >= 50){
            e.preventDefault();
            $(this).val(x.substring(0,50));
        }
    });
});

或者，如果您想让它成为一种 jQuery 方法，以便更轻松地进行多个特殊输入。

扩展 jQuery :D

$(function(){
    $.fn.extend({
        chiInput: function(chiLimit, engLimit){
            chiLimit = parseInt(chiLimit, 10) || 20;
            engLimit = parseInt(engLimit, 10) || 50;
            $(this).on("keydown change", function(e){
                if (e.keyCode == 8)
                    return;
                var x = this.value;
                if (x.match(/[\u3400-\u9FBF]/) && x.length >= chiLimit) {
                    e.preventDefault();
                    this.value = x.substring(0,chiLimit);
                } else if (x.length >= engLimit){
                    e.preventDefault();
                    this.value = x.substring(0,engLimit);
                }
            });
            return this;
        }
    });
});

HTML

<input class="chinese-input" type="text">
<textarea class="chinese-input"></textarea>

所以你可以做 $(".chinese-input").chiInput(20,50)在 上启动函数绑定(bind)多输入 .是的!

$(function(){
    $("#textarea").on("keydown change", function(e){
        var x = $(this).val();
        $("#length").text("length: "+x.length);
        if (e.keyCode == 8)
            return;
        if (x.match(/[\u3400-\u9FBF]/) && x.length >= 20) {
            e.preventDefault();
            $(this).val(x.substring(0,20));
        } else if (x.length >= 50){
            e.preventDefault();
            $(this).val(x.substring(0,50));
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="textarea" rows=1 cols=50></textarea>
<p id="length">length: </p>
<hr>
<p>You can copy this following Chinese to test: 這是一段中文文字。 (length: 9)</p>