Allows multiple languages in input boxes or text areas

Project maintained by Koas Hosted on GitHub Pages — Theme by mattgraham

i18n your inputs!

i18nInput is a simple jQuery plugin that enables multiple language inputs in regular input or textarea elements.

Simple demo

Here is a simple demo with the default options.

    <input type="text" id="test1"/>

And the result:

The plugin adds flags to the upper right side of the element to represent the languages. I'm aware that flags do not represent languages, I'm currently working on a new version where you will be able to choose between flags and two-letter codes for the language.

The flags are dimmed when there is no content for that language, and lighten up when some content is typed.

The data sent in the text field is a JSON string with this format:

  "en" : "English content", 
  "es" : "Spanish content", 
  ... , 
  "XX" : "Language XX content"

This JSON structure is also the way to provide initial content to the input.

i18nInput works in textareas as well:

    <textarea cols="80" rows="6" id="test2">
    {"en" : "English content", "es" : "Spanish content"}


You can pass an options object to override the default plugins options.


Sets the language that will be initiallly selected.

Default value: en

    <input type="text" id="test3" />
    $("#test3").val("{\"en\" : \"English content\", \"es\" : \"Spanish content\"}")
               .i18nInput({defaultLang : "es"});


Set the languages that will be available for input.

Default value: ['en', 'es', 'fr', 'de']

    <input type="text" id="test4" />
    $("#test4").i18nInput({availLang : ["en", "es"]});

imgPath and imgExt

Set the path for the flag images (with a trailing slash) and the images extension. The final path images will be imgPath + language + . + imgExt

Default value: flags/ and png


Function that will be called when this element gains focus.

Default: null


Function that will be called when a key is pressed on this element.

Default: null


Boolean that shows the original element so you can check what will be sent to the server when form is submitted.

Default: false

    <input type="text" id="test5" />
    $("#test5").i18nInput({debug : true});

That's all!

I hope you find this plugin useful and feel free to fork it or open issues with bugs or suggestions for improvement.

This plugin is free and open source, so you can use it in any project, commercial or not. If you want to support the developer you can donate via PayPal. Thanks!