Динамическое переключение языка с помощью jQuery IME (пример транслитерации для хинди, гуджарати и т. Д.) ⇐ Jquery

[Anonymous]

Если вам нужно предоставить многоязычное типирование (например, хинди, гуджарати, арабский, китайский) на веб -странице, библиотека jquery ime (редактор метода ввода) от Wikimedia - отличное решение.
По умолчанию, JQuery ime прикрепляет к входу/Textarea и позволяет пользователю выбирать входные методы. Но если вы хотите построить свой собственный пользовательский интерфейс - например, динамически необычайно выпадающий на языки переключения - вы можете управлять экземпляром IME непосредственно в JavaScript. < /P>
Следующее решение показывает, как:
• Инициализировать jquery ime на скрытом входе. (например, транслитерация хинди, транслитерация Гуджарати, арабский баквальтер, китайский пинин). < /p>
$(function() {
var LANGS = [
{ code: 'system', label: 'Use system input (OS keyboard)', native: true },
{ code: 'en', label: 'English', native: true },
{ code: 'zh', label: '中文 (Chinese) — Pinyin', native: false, imHint: /pinyin|transliteration/i },
{ code: 'gu', label: 'ગુજરાતી (Gujarati) — Transliteration', native: false, imHint: /transliteration/i },
{ code: 'hi', label: 'हिन्दी (Hindi) — Transliteration', native: false, imHint: /transliteration|inscript/i },
{ code: 'ar', label: 'العربية (Arabic) — Buckwalter', native: false, imHint: /buckwalter|transliteration/i }
];

var currentLangCode = 'en';
var currentLangObj = LANGS.find(l => l.code === currentLangCode);

var $selector = $('#language').empty();
LANGS.forEach(function(L) {
$selector.append($('', { value: L.code, text: L.label }));
});

// Hidden element to initialize IME
var $el = $('');
if (!$el.data('ime')) {
$el.ime({ showSelector: false, imePath: './' });
}
var imeInstance = $el.data('ime');

// Default: Hindi IME
imeInstance.setLanguage('hi');
imeInstance.setIM('hi-transliteration');

// Capture keypress
$(document).on('keypress', function(e) {
var altGr = false, c, input, replacement;
var $target = $(e.target);

if (!imeInstance.inputmethod) return true;

if (e.which === 8) { // Backspace
imeInstance.context = '';
return true;
}

if (e.altKey || e.altGraphKey) altGr = true;

if ((e.which < 32 && e.which !== 13 && !altGr) || e.ctrlKey || e.metaKey) {
imeInstance.context = '';
return true;
}

c = String.fromCharCode(e.which);
var element = imeInstance.$element.get(0);

input = $target.val().slice(
Math.max(0, element.selectionStart - imeInstance.inputmethod.maxKeyLength),
$target[0].selectionStart
);

replacement = imeInstance.transliterate(input + c, imeInstance.context, altGr);

imeInstance.context = (imeInstance.context || '') + c;
if (imeInstance.context.length > imeInstance.inputmethod.contextLength) {
imeInstance.context = imeInstance.context.slice(
imeInstance.context.length - imeInstance.inputmethod.contextLength
);
}

if (replacement.noop) return true;

if (document.activeElement === $target[0]) {
var start = $target[0].selectionStart - input.length;
var end = $target[0].selectionEnd;
$target.val(
$target.val().slice(0, start) +
replacement.output +
$target.val().slice(end)
);
$target[0].selectionStart = $target[0].selectionEnd = start + replacement.output.length;
}

e.stopPropagation();
e.preventDefault();
return false;
});

// Language change handler
$selector.on('change', function() {
currentLangCode = $(this).val();
currentLangObj = LANGS.find(l => l.code === currentLangCode);

// Update IME instance
imeInstance.setLanguage(currentLangCode);
imeInstance.setIM(currentLangCode + '-transliteration');

$(':focus').trigger('focusin');
});

$selector.val('en').trigger('change');
});


Подробнее здесь: https://stackoverflow.com/questions/797 ... or-hindi-g