HTML:

<input type="text" id="myInput">

jQuery:

$('#myInput').i18n({
    locales: ['en', 'it', 'ro'],
    attribute: 'data-key'
});
                        

Result:

Simply add

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="i18n.js"></script>
                

This only works on text inputs so make sure to add type="text" to the inputs.

To make this work simply select the input/multiple inputs you want to change and call the .i18n() function.

<input type="text" id="myInput">

$('#myInput').i18n({
    locales: ['en','it','ro',
    attribute: 'data-key'
});
                    

• If locales option is found, then the plugin will generate as many buttons and inputs as provided locales. Button text will be the uppercase locale.

• If no locales option is found, then a data-i18n will be searched for in the processed input and this should have a comma separated locale value: data-i18n="de,en,fr".

• If no locales option and no data-i18n atribute is found, then nothing will happen to the input.

Note: even if the locales option is given, the plugin will still search for the data-i18n atribute, and if such attribute is found it will overwrite the locales option.

• if the atribute option is found, then the plugin will append to the generated inputs the coressponding locale using dot notation, ex: data-key="some_value.de".

• if the option is found and it has no value, then the atribute of the inputs will only receive the coressponding locale, ex: data-key="de".

• if the atribute option is not found, then the default data-field option will be added.