i using plugin (https://jsfiddle.net/me7on070/) need reinitialise different parameters upon events happening. can tell me how so? have tried passing variable so:
$("input#chatmessage").intlkeyboard({ language: t, suggestions: "#suggestions", numresults: 5 // default }); where t variable changed within calling event. however, not work. original instance of plugin remains.
i had modify plugin in question bind namespaced events, unbound @ start correctly before rebinding changed parameters.
i forked jsfiddle shows full code.
the guts of declare following function top of plugin iife:
var ns = function (event) { return (event || '') + '.intlkeyboard'; } then changed .bind() , .on() calls use function so:
this.bind(ns("keydown"), ... then unbind everything, used .off(ns()) , .unbind(ns()) @ beginning.
the jsfiddle code copied following snippet/demo.
/*! * jquery intlkeyboard plugin v0.1 * * copyright 2013 ashwin purohit , other contributors * released under mit license * * date: 24 aug 2013 */ (function($) { var ns = function(event) { return (event || '') + '.intlkeyboard'; } // cross-browser set caret position function // http://stackoverflow.com/a/512542/100208 var setcaretposition = function(el, caretpos) { if (el != null) { if (el.createtextrange) { var range = el.createtextrange(); range.move("character", caretpos); range.select(); } else { if (el.selectionstart) { el.focus(); el.setselectionrange(caretpos, caretpos); } else { el.focus(); } } } }; // cross-browser caret position function // http://stackoverflow.com/a/4931963/100208 var getinputselection = function(el) { var start = 0, end = 0, normalizedvalue, range, textinputrange, len, endrange; if (typeof el.selectionstart == "number" && typeof el.selectionend == "number") { start = el.selectionstart; end = el.selectionend; } else { range = document.selection.createrange(); if (range && range.parentelement() == el) { len = el.value.length; normalizedvalue = el.value.replace(/\r\n/g, "\n"); // create working textrange lives in input textinputrange = el.createtextrange(); textinputrange.movetobookmark(range.getbookmark()); // check if start , end of selection @ end // of input, since movestart/moveend doesn't return want // in cases endrange = el.createtextrange(); endrange.collapse(false); if (textinputrange.compareendpoints("starttoend", endrange) > -1) { start = end = len; } else { start = -textinputrange.movestart("character", -len); start += normalizedvalue.slice(0, start).split("\n").length - 1; if (textinputrange.compareendpoints("endtoend", endrange) > -1) { end = len; } else { end = -textinputrange.moveend("character", -len); end += normalizedvalue.slice(0, end).split("\n").length - 1; } } } } return { start: start, end: end }; }; // usage: call on input or textarea: // $('input.french').intlkeyboard({ // language: 'fra', // replacements: '#suggestions' // makes sense imes // numresults: 5 // makes sense imes // }); // listen changes, , replace key sequences // international versions, people don't want install keyboard. $.fn.intlkeyboard = function(options) { // keys don't change caret position in input, // used in key combinations var silentkeys = { 16: true }; // reversed version of http://www.selfcontained.us/2009/09/16/getting-keycode-values-in-javascript/ var keystocodes = { "backspace": 8, "tab": 9, "return": 13, "shift": 16, "ctrl": 17, "alt": 18, "pausebreak": 19, "capslock": 20, "escape": 27, " ": 32, "pageup": 33, "pagedown": 34, "end": 35, "home": 36, "left": 37, "up": 38, "right": 39, "down": 40, "+": 43, "printscreen": 44, "insert": 45, "delete": 46, "0": 48, "1": 49, "2": 50, "3": 51, "4": 52, "5": 53, "6": 54, "7": 55, "8": 56, "9": 57, ";": 59, "=": 61, "a": 65, "b": 66, "c": 67, "d": 68, "e": 69, "f": 70, "g": 71, "h": 72, "i": 73, "j": 74, "k": 75, "l": 76, "m": 77, "n": 78, "o": 79, "p": 80, "q": 81, "r": 82, "s": 83, "t": 84, "u": 85, "v": 86, "w": 87, "x": 88, "y": 89, "z": 90, // numpad codes -- todo keys that, depending on if hit numpad // or keyboard, can have different codes, like: "0": [48, 96] //"0":96, "1":97, "2":98, "3":99, "4":100, "5":101, "6":102, "7":103, "8":104, "9":105, "*": 106, "+": 107, "-": 109, ".": 110, "/": 111, "f1": 112, "f2": 113, "f3": 114, "f4": 115, "f5": 116, "f6": 117, "f7": 118, "f8": 119, "f9": 120, "f10": 121, "f11": 122, "f12": 123, "numlock": 144, "scrolllock": 145, ";": 186, "=": 187, ",": 188, "-": 189, ".": 190, "/": 191, "`": 192, "[": 219, "\\": 220, "]": 221, "'": 222 }; var stack = []; var self = this; // ideographic languages we'd prefer use google suggest for. var languagetogoogleitc = { zh: "zh-t-i0-pinyin", hi: "hi-t-i0-und" }; self.unbind(ns()); // define latin keyboard mappings ourselves. var langreplacements = { fra: [ // french | français // c cedille [ [",", "c"], "ç" ], [ [",", "shift", "c"], "Ç" ], // accent grave [ ["`", "a"], "à" ], [ ["`", "e"], "è" ], [ ["`", "u"], "ù" ], [ ["`", "shift", "a"], "À" ], [ ["`", "shift", "e"], "È" ], [ ["`", "shift", "u"], "Ù" ], // accent aigu [ ["'", "e"], "é" ], [ ["'", "shift", "e"], "É" ], // but, differentiate between c'est , céline // allowing user put space after ' not accent [ ["'", " ", "e"], "'e" ], [ ["'", " ", "shift", "e"], "'e" ], // circonflexe (^ = [shift] + 6) [ ["shift", "6", "a"], "â" ], [ ["shift", "6", "e"], "ê" ], [ ["shift", "6", "i"], "î" ], [ ["shift", "6", "o"], "ô" ], [ ["shift", "6", "shift", "a"], "Â" ], [ ["shift", "6", "shift", "e"], "Ê" ], [ ["shift", "6", "shift", "i"], "Î" ], [ ["shift", "6", "shift", "o"], "Ô" ], // le tréma [ ["shift", "'", "a"], "ä" ], [ ["shift", "'", "e"], "ë" ], [ ["shift", "'", "i"], "ï" ], [ ["shift", "'", "o"], "ö" ], [ ["shift", "'", "u"], "ü" ], [ ["shift", "'", "shift", "a"], "Ä" ], [ ["shift", "'", "shift", "e"], "Ë" ], [ ["shift", "'", "shift", "i"], "Ï" ], [ ["shift", "'", "shift", "o"], "Ö" ], [ ["shift", "'", "shift", "u"], "Ü" ] ], es: [ // spanish | español // el acento [ ["'", "a"], "á" ], [ ["'", "e"], "é" ], [ ["'", "i"], "í" ], [ ["'", "o"], "ó" ], [ ["'", "u"], "ú" ], [ ["'", "shift", "a"], "Á" ], [ ["'", "shift", "e"], "É" ], [ ["'", "shift", "i"], "Í" ], [ ["'", "shift", "o"], "Ó" ], [ ["'", "shift", "u"], "Ú" ], // la crema o diéresis [ ["shift", "'", "u"], "ü" ], [ ["shift", "'", "shift", "u"], "Ü" ], // la ñ [ ["shift", "`", "n"], "ñ" ], [ ["shift", "`", "shift", "n"], "Ñ" ], // signos de interrogación y exclamación invertidos // handles [shift]-[?]-[?], , [shift]-[?], [shift]-[?] [ ["shift", "/", "/"], "¿" ], [ ["shift", "/", "shift", "/"], "¿" ], [ ["shift", "1", "1"], "¡" ], [ ["shift", "1", "shift", "1"], "¡" ], ], deu: [ // german | deutsch // umlaut [ ["shift", "'", "a"], "ä" ], [ ["shift", "'", "o"], "ö" ], [ ["shift", "'", "u"], "ü" ], [ ["shift", "'", "shift", "a"], "Ä" ], [ ["shift", "'", "shift", "o"], "Ö" ], [ ["shift", "'", "shift", "u"], "Ü" ], // eszett [ [",", "s"], "ß" ], ], tur: [ // turkish | türkçe // yumuşak ge [ [",", "g"], "ğ" ], [ [",", "shift", "g"], "Ğ" ], // ı [ [".", "i"], "ı" ], [ [".", "shift", "i"], "i" ], // capital becomes İ [ ["shift", "i"], "İ" ], // â, î, û [ ["shift", "6", "a"], "â" ], [ ["shift", "6", "i"], "î" ], [ ["shift", "6", "u"], "û" ], [ ["shift", "6", "shift", "a"], "Â" ], [ ["shift", "6", "shift", "i"], "Î" ], [ ["shift", "6", "shift", "u"], "Û" ], // çe [ [",", "c"], "ç" ], [ [",", "shift", "c"], "Ç" ], // şe [ [",", "s"], "ş" ], [ [",", "shift", "s"], "Ş" ], // ö, ü [ ["shift", "'", "o"], "ö" ], [ ["shift", "'", "u"], "ü" ], [ ["shift", "'", "shift", "o"], "Ö" ], [ ["shift", "'", "shift", "u"], "Ü" ], ], en: [] }; // builds reverse trie key combinations, keyed on keycode, // passed human-readable array of arrays. // if combo "," (188) "c" (67), should replaced ç, // trie like: {67: {188: {r: ç}}} var reversetrieforlang = function(language) { var tree = {}; var combos = langreplacements[language]; (var = 0; < combos.length; += 1) { var node = tree; var keys = combos[i][0]; var replacement = combos[i][1]; (var j = keys.length - 1; j >= 0; j -= 1) { var key = keys[j]; var code = keystocodes[key]; if (!node.hasownproperty(code)) { node[code] = {}; } node = node[code]; if (j == 0) { node.r = replacement; } } } return tree; }; // if language pinyin, ime different. if (languagetogoogleitc.hasownproperty(options.language)) { // default number of results. options = $.extend({ numresults: 5 }, options); var strokebuffer = []; var replacementdiv = $(options.suggestions); var replacementul = replacementdiv.find(".suggestions").unbind(ns()); var replacementtyped = replacementdiv.find(".typed"); var replacements = []; var mouseonreplacement = null; // when user selects replacement. we're guaranteed // index valid replacement. var selectreplacement = function(index) { var decodedreplacement = decodeuricomponent(replacements[index]); var caret = getinputselection(self[0]); var pos = caret.end; var text = self.val(); // insert chosen suggestion @ current position. var replacementtext = text.substr(0, pos) + decodedreplacement + text.substr(pos); self.val(replacementtext); // when replace text, cursor auto-jumps end. // if in middle of string, that's annoying. // puts cursor character editing. setcaretposition(self[0], pos + decodedreplacement.length); clearselection(); }; // hide , clear replacement divs , suggestions. var clearselection = function() { mouseonreplacement = null; strokebuffer.length = 0; replacements = []; replacementul.empty(); replacementtyped.empty(); //replacementdiv.hide(); }; // sends request google ime suggestions var getreplacements = function() { // show or hide replacement div (in case called backspace) if (strokebuffer.length > 0) { replacementdiv.show(); } else { clearselection(); return; } var encodedtext = encodeuricomponent(strokebuffer.join("")); replacementtyped.html(encodedtext + ":"); $.ajax({ type: "get", url: "https://inputtools.google.com/request", cache: false, datatype: "json", data: { text: encodedtext, itc: languagetogoogleitc[options.language], num: options.numresults, // google sets these values in own ajax calls, they're // cryptic , undocumented, i'm passing them along. cp: 0, cs: 1, // input , output encoding ie: "utf-8", oe: "utf-8", // doesn't seem matter is. app: "test" } }).done(function(result) { // google json result terribly nested. replacements = result[1][0][1]; var listelements = ""; // ordered lists don't retain numbering when making // list horizontal li{display:inline} (var = 0; < replacements.length; += 1) { listelements += "<li><span class='number'>" + (i + 1) + ".</span> " + replacements[i] + "</li>"; } replacementul.html(listelements); }); }; // on delete/backspace, drop last char strokebuffer, // , update replacements this.bind(ns("keydown"), function(e) { if (e.which === 8 || e.which === 46) { if (strokebuffer.length !== 0) { e.preventdefault(); strokebuffer.pop(); getreplacements(); } } }); // keypress on input gets more google input tools suggestions this.bind(ns("keypress"), function(e) { var charcode = string.fromcharcode(e.charcode); var index = parseint(charcode, 10) - 1; // hit number 1 replacements.length if (!isnan(index)) { e.preventdefault(); if (index >= 0 && index < replacements.length) { selectreplacement(index); } return; } // hit [space] or [enter] -- pick first replacement. if (charcode === "" || charcode === " ") { if (strokebuffer.length !== 0) { e.preventdefault(); selectreplacement(0); } return; } // hit a-z character. don't show // character in input. if (charcode >= "a" && charcode <= "z") { e.preventdefault(); strokebuffer.push(charcode); getreplacements(); } }); // when user clicks replacement mouse replacementul.on(ns("click"), "li", function(e) { selectreplacement($(e.target).index()); }); // if user focuses out of input element, kill // suggestion box. if clicked on suggestion, // triggers input.focusout event, set // set replacement , re-focus input. this.bind(ns("focusout"), function() { if (mouseonreplacement !== null) { selectreplacement(mouseonreplacement); $(this).focus(); } else { clearselection(); } }); replacementul.on(ns("mouseover"), "li", function(e) { var index = $(e.target).index(); mouseonreplacement = index; }); // make chainable. return this; } // if language latin-extended, can use keystroke replacement var reversetrie = reversetrieforlang(options.language); this.bind(ns("keydown"), function(e) { var text = self.val(); var code; // trie of replacements language. var node = reversetrie; // current caret start , end position. var caret = getinputselection(this); var replacement = null; // number of keystrokes 'erase' when replacing. var sequencelength = 0; // on every keydown, add keycode stack. stack.push(e.which); (var = stack.length - 1; >= 0; -= 1) { code = stack[i]; // don't count silent keys [shift] in sequence length. if (!silentkeys.hasownproperty(code)) { sequencelength += 1; } node = node[code]; // couldn't "recurse" because sequence trail ends here. if (node === undefined) { break; } // found character replacement. // peek 1 more character, , if sequence continues, // don't use replacement yet. if (i > 0 && node.hasownproperty(stack[i - 1])) { continue; } if (node.hasownproperty("r")) { replacement = node.r; break; } } // found replacement sequence. // use replace (sequencelength) chars before current caret position if (replacement !== null) { e.preventdefault(); // todo: use stack of length [max combo length language]; // 1 grows ad infinitum (er, ad successus), before clearing. stack.length = 0; var pos = caret.end; var replacementtext = text.substr(0, pos - sequencelength + 1) + replacement + text.substr(pos); self.val(replacementtext); // when replace text, cursor auto-jumps end. // if in middle of string, that's annoying. // puts cursor character editing. setcaretposition(this, pos); } }); // make chainable return this; }; })(jquery); $(function() { var lang; function setlanguage(t) { lang = t; $("input#chatmessage").intlkeyboard({ language: t, suggestions: "#suggestions", numresults: 5 // default }); } $('#change').click(function() { setlanguage(lang === 'es' ? 'en' : 'es'); $('#change').text($('#change').text().replace(/(english|spanish)/g, lang === 'es' ? 'english' : 'spanish')); return false; }); setlanguage('en'); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="chatmessage"></input> <ul id="suggestions"></ul> <button id="change">change spanish</button>