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

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(/[\㐀-\龿]/) && 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

一些语言代码：'it'= italy，'en'= english

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