I have a textarea where users can input either English or Chinese, or both. maxLength="50" is fine for English but I hope to limit Chinese characters to only 20. If it's the case of a mixture it should be also limited to 20. Not sure how I can do that?

I have a textarea where users can input either English or Chinese, or both. maxLength="50" is fine for English but I hope to limit Chinese characters to only 20. If it's the case of a mixture it should be also limited to 20. Not sure how I can do that?

• javascript
• html

4 Answers 4

jQuery solution?

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));
        }
    });
});

Or if you want to make it a jQuery method to make it easier to make multiple special inputs.

Extending that 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>

So you can do $(".chinese-input").chiInput(20,50) to initiate the function binding on multiple inputs. Yeah!

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

Use the window.navigator.language property, it contains the "language code" of the language currently used (http://www.metamodpro./browser-language-codes).

If you have this HTML :

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

Then you can do :

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.

To check the current language you can:

• determine it from the browser language
• determine it from an option selected by the user

While the second option is a custom code and you need only to save the preference of the user in a variable, the first code can be acplished with the following code:

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

Now if you have the language simply define limit as follow:

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

... // Your checks here

You could detect the languages as follows:

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

Some language code: 'it' = italy, 'en' = english

I also found a tool that could be helpful for you while detecting languages : franc