Question

我有一个textarea，用户可以输入英文或中文，或两者兼而有之。 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)启动多个输入的功能绑定。呀！

$(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>

Answer 2

使用window.navigator.language属性，它包含当前使用的语言（http://www.metamodpro.com/browser-language-codes）的“语言代码”。

如果你有这个HTML：

<input id="myInput" type="text" maxlength="50"/>

然后你可以这样做：

JS：

var myInput = document.querySelector('#myInput');
if(navigator.language === "zh") myInput.setAttribute('maxlength', 20); //zh is chinese, this code will set the maxlength to 20 ONLY for chinese language, others will have 50, like specified in the HTML.

Answer 3

要查看当前语言，您可以：

从浏览器语言确定
根据用户选择的选项确定

虽然第二个选项是自定义代码，而您只需要将用户的首选项保存在变量中，但第一个代码可以使用以下代码完成：

// This to handle differences between browsers (userLanguage for old IE versions)
var language = window.navigator.userLanguage || window.navigator.language;

现在，如果你有这种语言，只需按照以下方式定义限制：

var maxSize = 40;
if (language == 'ZH') {
   maxSize = 20;
}

... // Your checks here

Answer 4

您可以按如下方式检测语言：

var language = window.navigator.userLanguage || window.navigator.language;
alert(language); //works IE/SAFARI/CHROME/FF

// navigator.userLanguage for IE
//window.navigator.language for firefox/opera/safari

一些语言代码：＆＃39;它＆＃39; =意大利，＆＃39; en＆＃39; =英语

我还发现了一种在检测语言时可能对您有所帮助的工具：franc

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

4 个答案: