Как можно сделать виртуальную клавиатуру на сайт , чисто из 8-9 букв! Чтобы оно всегда выводилось в правом верхнем углу, и можно было с помощью них писать в любой уголок сайта, где стоит курсор! Очень надо спасибо все перепробывал, никак
Вот, поразвлекался... Будет печатать буквы в область для ввода текста (input, textarea), которая в фокусе. Какие именно буквы будут на кнопках - легко настраивается. Работает в IE8, Opera, Firefox, Google Chrome. В других браузерах не проверял. Всегда находится в правом верхнем углу, при прокрутке страницы остаётся там. Если курсор мышки находится не над "клавиатурой" - она становится полупрозрачной и через неё видно, что на заднем плане. При наведении курсора становится полностью видимой. Для вставки в страничку нужно просто скопировать JS-скрипт в раздел head страницы. Можно сделать в виде отдельного подключаемого JS-файла при желании, я думаю. Вот пример полностью готовой HTML-страницы, чтобы сразу посмотреть, как работает: Код (Text): <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Печатаем буквы мышкой</title> <script language="JavaScript" type="text/javascript"> // Сюда написать буквы, которые нужно вводить var letters = 'абвгдеж'; var field = false; function enableWriter() { var i = false, div = false, j = 0, id = '', l = '', html = '', elems = new Array(); var body = document.getElementsByTagName('body')[0]; var inputs = body.getElementsByTagName('input'); var texts = body.getElementsByTagName('textarea'); for(i in inputs) { if(inputs[i].type === 'text' || inputs[i].type === 'password') { elems[j] = inputs[i]; ++j; } } for(i in texts) { if(texts[i].type === 'textarea') { elems[j] = texts[i]; ++j; } } for(i in elems) { id = 'id_' + i; elems[i].id = id; if(window.ActiveXObject) elems[i].attachEvent('onfocus', function(asd) { return function() { field = asd; }; }(id)); else elems[i].addEventListener('focus', function(asd) { return function() { field = asd; }; }(id), false); } div = document.createElement('div'); div.style.position = 'absolute'; div.style.top = '0px'; div.style.right = '0px'; div.style.backgroundColor = 'white'; div.style.border = 'solid 1px black'; div.style.height = '21px'; div.style.padding = '2px'; div.id = 'writer'; div.onmouseover = showWriter; div.onmouseout = hideWriter; for(i = 0; i < letters.length; ++i) { l = letters.substring(i, i + 1); html += '<input type="button" value="' + l + '" style="width: 21px; height: 21px;" onclick="javascript: writerPut(\'' + l + '\');">'; } div.innerHTML = html; body.appendChild(div); myOpacity(div, 0.15); } function showWriter() { myOpacity(document.getElementById('writer'), 1); } function hideWriter() { myOpacity(document.getElementById('writer'), 0.15); } function topWriter() { document.getElementById('writer').style.top = getDocumentScrollTop() + 'px'; } function writerPut(c) { if(field) { var el = document.getElementById(field); var pos = getCaretPos(el); el.value = el.value.substring(0, pos) + c + el.value.substring(pos); setCaretPos(el, pos + 1); } } function myOpacity(el, op) { if(window.ActiveXObject) el.style.filter = 'alpha(Opacity=' + parseInt(op * 100) + ')'; else el.style.opacity = op; } function getDocumentScrollTop(doc) { doc = doc || document; var ret = (doc.documentElement.scrollTop > doc.body.scrollTop) ? doc.documentElement.scrollTop : doc.body.scrollTop; return ret; } function getCaretPos(el) { var CaretPos = 0; if(document.selection) { el.focus(); var Sel = document.selection.createRange(); Sel.moveStart('character', -el.value.length); CaretPos = Sel.text.length; } else if(el.selectionStart != undefined) CaretPos = el.selectionStart; return (CaretPos); } function setCaretPos(el, pos) { if(el.setSelectionRange) { el.focus(); el.setSelectionRange(pos, pos); } else if(el.createTextRange) { var range = el.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } window.onload = enableWriter; window.onscroll = topWriter; </script> </head> <body> <form name="testForm" method="post" action="writer.html"> <table> <tr> <td>Первое поле</td> <td width="20"> </td> <td><input type="text" name="first" value="" /></td> </tr> <tr> <td>Второе поле</td> <td> </td> <td><input type="text" name="second" value="" /></td> </tr> <tr> <td>Третье поле</td> <td> </td> <td><textarea name="third"></textarea></td> </tr> <tr> <td> </td> <td> </td> <td><input type="submit" value="Отправить" /></td> </tr> </table> </form> </body> </html> ЗЫ: вознаграждение приветствуется ))
спасибо большое, вознаграждение обьязательно будет! только вот можно еще 1 вопросик?? тм буквы встраиваются горизонтально, а мне бы вертикально вниз встраивались
1. Убрать строку Код (Text): div.style.height = '21px'; 2. Изменить строку: Код (Text): html += '<input type="button" value="' + l + '" style="width: 21px; height: 21px;" onclick="javascript: writerPut(\'' + l + '\');">'; на: Код (Text): html += '<input type="button" value="' + l + '" style="width: 21px; height: 21px;" onclick="javascript: writerPut(\'' + l + '\');" \/><br \/>';