i18ninput

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.

  <div>
    <input type="text" id="test1"/>
    <script>$("#test1").i18nInput();</script>
  </div>

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:

  <div>
    <textarea cols="80" rows="6" id="test2">
    {"en" : "English content", "es" : "Spanish content"}
    </textarea>
    <script>$("#test2").i18nInput();</script>
  </div>

Options

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

defaultLang

Sets the language that will be initiallly selected.

Default value: en

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

availLang

Set the languages that will be available for input.

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

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

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

focusCallback

Function that will be called when this element gains focus.

Default: null

keyupCallback

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

Default: null

debug

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

Default: false

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

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!