Good day to all)
I have problems with a bunch of virtual keyboard with ajax auto-complete, I've made the sheet auto-complete, but it responds only to pressing the keyboard or clicking the mouse (onclick, onmousedown), etc., but I would like it to appear when entering letters.
Here is the autocomplete:
var xmlHttp function showState(str){ if (typeof XMLHttpRequest != "undefined"){ xmlHttp= new XMLHttpRequest(); } else if (window.ActiveXObject){ xmlHttp= new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlHttp==null){ alert ("Browser does not support XMLHTTP Request") return } var url="auto.jsp"; url += "?txtContent=" +str; xmlHttp.onreadystatechange = stateChange; xmlHttp.open("GET", url, true); xmlHttp.send(null); } And this is a virtual keyboard script, to be honest, I understand javascript badly, so I found the finished one and changed it for myself:
var jsKeyboard = { settings: { buttonClass: "button", // default button class onclick: "jsKeyboard.write();", // default onclick event for button keyClass: "key", // default key class used to define style of text of the button text: { close: "Закрыть" } }, "keyboard": [], // different keyboards can be set to this variable in order to switch between keyboards easily. init: function(elem, keyboard) { jsKeyboard.keyboard["default"] = jsKeyboard.defaultKeyboard; jsKeyboard.keyboardLayout = elem; if (keyboard != null && keyboard != undefined) jsKeyboard.generateKeyboard(keyboard); else jsKeyboard.generateKeyboard("default"); jsKeyboard.addKeyDownEvent(); }, focus: function(t) { jsKeyboard.currentElement = $(t); jsKeyboard.show(); }, keyboardLayout: "", // it shows the html element where keyboard is generated currentKeyboard: "default", // it shows the which keyboard is used. If it's not set default keyboard is used. currentElement: null, generateKeyboard: function(keyboard) { var bClass = ""; var kClass = ""; var onclick = ""; var text = ""; var s = ""; s += "<div id=\"keyboard\">"; s += "<div id=\"keyboardHeader\">"; s += "<div onclick=\"jsKeyboard.hide();\"><span>" + jsKeyboard.settings.text.close + "</span><span class=\"closex\"> X</span></div>" s += "</div>"; /*capital letter*/ s += "<div id=\"keyboardCapitalLetter\">"; $.each(jsKeyboard.keyboard[keyboard].capitalLetter, function(i, key) { generate(key); }); s += "</div>"; /*small letter */ s += "<div id=\"keyboardSmallLetter\">"; $.each(jsKeyboard.keyboard[keyboard].smallLetter, function(i, key) { generate(key); }); s += "</div>"; /*number*/ s += "<div id=\"keyboardNumber\">"; $.each(jsKeyboard.keyboard[keyboard].number, function(i, key) { generate(key); }); s += "</div>"; /*symbols*/ s += "<div id=\"keyboardSymbols\">"; $.each(jsKeyboard.keyboard[keyboard].symbols, function(i, key) { generate(key); }); s += "</div>"; function generate(key) { bClass = key.buttonClass == undefined ? jsKeyboard.settings.buttonClass : key.buttonClass; kClass = key.keyClass == undefined ? jsKeyboard.settings.keyClass : key.keyClass; onclick = key.onclick == undefined ? jsKeyboard.settings.onclick.replace("()", "(" + key.value + ")") : key.onclick; text = (key.isChar != undefined || key.isChar == false) ? key.value : String.fromCharCode(key.value); s += "<div class=\"" + bClass + "\" onclick=\"" + onclick + "\"><div class=\"" + kClass + "\">" + text + "</div></div>"; bClass = ""; kClass = ""; onclick = ""; text = ""; } $("#" + jsKeyboard.keyboardLayout).html(s); }, addKeyDownEvent: function() { $("#keyboardCapitalLetter > div.button, #keyboardSmallLetter > div.button, #keyboardNumber > div.button, #keyboardSymbols > div.button"). bind('mousedown', (function() { $(this).addClass("buttonDown"); })). bind('mouseup', (function() { $(this).removeClass("buttonDown"); })). bind('mouseout', (function() { $(this).removeClass("buttonDown"); })); }, changeToSmallLetter: function() { $("#keyboardCapitalLetter,#keyboardNumber,#keyboardSymbols").css("display", "none"); $("#keyboardSmallLetter").css("display", "block"); }, changeToCapitalLetter: function() { $("#keyboardCapitalLetter").css("display", "block"); $("#keyboardSmallLetter,#keyboardNumber,#keyboardSymbols").css("display", "none"); }, changeToNumber: function() { $("#keyboardNumber").css("display", "block"); $("#keyboardSymbols,#keyboardCapitalLetter,#keyboardSmallLetter").css("display", "none"); }, changeToSymbols: function() { $("#keyboardCapitalLetter,#keyboardNumber,#keyboardSmallLetter").css("display", "none"); $("#keyboardSymbols").css("display", "block"); }, write: function(m) { var t = jsKeyboard.currentElement.val(); t += String.fromCharCode(m); jsKeyboard.currentElement.val(t); }, del: function() { var t = jsKeyboard.currentElement.val(); jsKeyboard.currentElement.val(t.substring(0, t.length - 1)); }, enter: function() { showState(); var t = jsKeyboard.currentElement.val(); jsKeyboard.currentElement.val(t + "\n"); }, writeSpecial: function(m) { var t = jsKeyboard.currentElement.val(); t += m; jsKeyboard.currentElement.val(t); }, show: function() { $("#keyboard").animate({ "left": "200" }, "slow", function() { }); }, hide: function() { $("#keyboard").animate({ "left": "-900px" }, "slow", function() { }); }, defaultKeyboard: { capitalLetter: [ // 1st row { value: 1240, buttonClass: "button button_a" },{ value: 1030 },{ value: 1186 },{ value: 1170 },{ value: 1198 },{ value: 1200 }, { value: 1178 },{ value: 1256 },{ value: 1210 }, { value: "Delete", isChar: "false", buttonClass: "button button_enter", onclick: "jsKeyboard.del()", keyClass: "key key_del" }, // 1st row { value: 1049 },{ value: 1062 },{ value: 1059 },{ value: 1050 },{ value: 1045 },{ value: 1053 }, { value: 1043 },{ value: 1064 },{ value: 1065 },{ value: 1047 },{ value: 1066 }, // { value: "del", isChar: "false", onclick: "jsKeyboard.del()", buttonClass: "button button_del", keyClass: "key key_del" }, // 2nd row { value: 1060, buttonClass: "button button_a" },{ value: 1067 },{ value: 1042 },{ value: 1040 }, { value: 1055 },{ value: 1056 },{ value: 1054 },{ value: 1051 },{ value: 1044 },{ value: 1052 }, // 3rd row // { value: "abc", isChar: "false", buttonClass: "button button_smallletter", onclick: "jsKeyboard.changeToSmallLetter();", keyClass: "key key_smallletter" }, { value: 1071 },{ value: 1063 },{ value: 1057 },{ value: 1048 },{ value: 1058 },{ value: 1068 }, { value: 1041 },{ value: 1070 },{ value: 1046 },{ value: 1069 },{ value: 1061 }, // 4th row { value: "123", isChar: "false", buttonClass: "button button_numberleft", onclick: "jsKeyboard.changeToNumber();", keyClass: "key key_number" }, { value: 32, buttonClass: "button button_space" }, { value: "ENG", isChar: "false", buttonClass: "button button_symbolsright", onclick: "jsKeyboard.changeToSymbols();", keyClass: "key key_symbols" } But I couldn’t change it so that I could read it right away from keyboard presses, help :) And this is how I tried to include it in my jsp
<input id="txtContent" onfocus="jsKeyboard.focus(this); clean(this);" type="text" name="name" onmousedown="showState(this.value);" style="position:relative;right:100px;"></div> 
