HTML+CSS+JavaScript

Добрый день!

Возникла необходимость использования виртуальной клавиатуры.

Нашла в сети java script виртуальной клавиатуры, с использованием jquery.
Подключила, работает.

Суть работы такова: возле каждого поля ввода формы появляется значок клавиатуры, и по нажатию на него, клавиатура появляется на экране, и ей можно пользоваться.

Но возникла проблема, которую решить своими силами не получается.:(

Итак имеется: N-е количество полей одной формы.

Требуется: По нажатию (фокусированию) на любом из полей чтобы появлялась вирт клавиатура.
Другими словами, чтоб значок клавиатуры не болтался и не рябил в глазах, если полей формы очень много, а клавиатура всплывала, только по нажатию (фокусировании) на поле.

В приложении мои попытки реализовать вызов функции через событие onFocus.
в Примере 2 поля формы, одно с попыткой реализовать мою задумку, второе с прямым использованием js - скрипта.

Буду рада любым решениям, удовлетворяющим условию. Спасибо

Данная клавиатура не использует jQuery, ей он не нужен.

У вас две возможности:
1. Доработать код клавиатуры, так, чтобы инициализация ее происходила не при загрузке страницы, а по событию. Это строки кода начиная с 574. Именно инициализация по загрузке причина того, что ваши потуги присвоения класса впустую. Кстати, коли вы используете jQuery, то не именуйте функции именами, которые он использует - у вас это addClass
2. Не переписывать код самой клавиатуры, а скрывать все ее иконки (у элементов формы), и показывать только ту, которая принадлежит выбранному элементу формы.

Это что такое:
onkeyup="this.value = this.value.replace (/[^а-яА-ЯёЁ-]+/, '')"
и зачем? А если написать арабским то все ОК считается?

Но все таки, если даже принять пункт 2, хорошо бы этот код изменить. 85 КБ ради этого, это слишком. А ведь не все языки сразу нужны, значит их лучше подгружать, код уже на прилично похудеет, а если его еще сжать, тогда более менее вес будет.

предложение ваше поняла, но знаний по реализации совсем нет...

Плачевно, конечно, но такова селяви - хотите жить, крутитесь. )
Сделайте так - откройте страницу свою (уберите вашу функцию и ее вызовы из полей), например, в FF. Просмотрите html-код ее в отладчике. Обратите внимание на элементы иконок этой клавиатуры.
Станет понятным, что нужно скрыть после инициализации клавиатуры, и открывать по фокусу элемента. Вот это можете и на jQuery сделать, если иного не дано. Попробуйте хотя бы, не получится, поможем.

На вопрос так и не ответили - для чего обработчик onkeyup у полей формы?

>На вопрос так и не ответили - для чего обработчик onkeyup у полей формы?

Убрать забыла, изначально для отсеивания на лету запрещенных символов. Т.е в данном случае разрешены кирилические символы

Если разрешена только кириллица, то можно спокойно выкинуть из кода клавиатуры все языки, как и список выбора их (сделать это просто, массивы языков указаны в начале кода, оставить кириллицу, а остальное удалить несложно).

А ввод разрешен только с виртуальной клавиатуры или нет?

я уже удалила все языки, это все не важно.
Важно понять, как на деле реализовать сокрытие иконки, и показывать при событии onFocus
А еще былобы лучше, не показывать иконку вовсе, а по нажатию на поле, сразу открывать клавиатуру.
У меня совсем нет вариантов, я пробовала через функцию, добавлять class, но не выходит.
Видать придется выводить сразу все иконки, ко всем полям :(


Все это дело для тач монитора. Ввводить можно, если присоединить обычную клавиатуру, но пользователи будут использовать только тач.скрин.

Я же вам писал, что ваши попытки присвоения класса ни к чему не приведут, так как иконки для полей формы устанавливаются при загрузке скрипта.

Если предполагается использование только виртуальной клавиатуры, то логично для полей формы в обработчике onkeyup очищать их значения, а не осуществлять поиск и вырезание недопустимого.

Код в обработчике нужно смотреть, а в нем видно (если вы не можете сценарии читать), что после каждого поля добавляется изображение иконки с классом keyboardInputInitiator. Открываем файл стилей клавиатуры и ищем этот селектор, и добавляем в него правило visibility: hidden.

Добавляем обработчики для полей:

onblur="hideIcon()" onfocus="showIcon(this)"

и функции:

<script> var ico = null; function showIcon(e){    if(ico) ico.style.visibility = 'hidden';    ico = e.parentNode.lastChild;    ico.style.visibility = 'visible'; } function hideIcon() {     ico.style.visibility = 'hidden';     ico = null; }    </script>

Иконка появляется, но по нажатию на нее, она исчезает и клавиатура не открывается:(

>>>Если предполагается использование только виртуальной клавиатуры, то логично для полей формы в обработчике onkeyup очищать их значения, а не осуществлять поиск и вырезание недопустимого.

C этим согласна, сделаю.

Да, в webkit так будет, это из-за onblur. Сделайте так:

<html> <head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />  <link rel="stylesheet" type="text/css" href="keyboard.css"> <script src="keyboard.js" type="text/javascript" ></script> <script> var ico = null; function showIcon(e){    if(ico) ico.style.visibility = 'hidden';    ico = e.parentNode.lastChild;    ico.style.visibility = 'visible'; } function hideIcon(e) {     e = e.target || e.srcElement;     if(e.parentNode.tagName!='TD') {        ico.style.visibility = 'hidden';        ico = null;     } }    </script> </head> <body onclick="hideIcon(event)"> <form method='post' action='index.php'> <table> <tr>   <td colspan=2 style='border-bottom: 1px solid #000; padding-bottom:5px;'>Поля помеченые <b style='color:red;'>*</b>, обязательны к заполнению:</td> </tr> <tr>   <td>Фамилия</td>   <td><input type='text' name='surn' maxlength='50' onfocus="showIcon(this)" class="keyboardInput" /></td> </tr> <tr>   <td>Имя</td>   <td><input type='text' name='name' maxlength='50' onfocus="showIcon(this)" class="keyboardInput" /></td> </tr>    <tr>   <td colspan=2><input type='submit' name='send' value='Отправить обращение' /></td> </tr> </table> </form> </body> </html>

Если допустимо не скрывать иконку клавиатуры у последнего выбранного поля, то можно удалить обработчик onclick тела документа и функцию hideIcon().

Все работает, спасибо огромное, но теперь, если набрать с помощью клавиатуры что либо, нажать на ней enter, то потом сразу в это же поле нельзя ничего написать, пока не кликнешь на другом поле и не вернешься на предыдущее (клавиатура не появляется)

Это из-за потери фокуса, так как фокус получает виртуальная клавиатура, и "ваш Хром", теряет фокус. Удалите у полей формы событие onfocus, добавьте событие onclick, поместив в него вызов функции showIcon(this). А функцию перепишите так:

function showIcon(e){    e = e.parentNode.lastChild;    if(ico == e) return false;    if(ico) ico.style.visibility = 'hidden';    ico = e;    e.style.visibility = 'visible'; }

PS. Все эти глюки видимо связаны с некорректной работой самого скрипта в зависимости от браузера. Я не анализировал его весь, но можете убедиться, что поведение клавиатуры разница от браузера к браузеру, например, поведение той же иконки клавиатуры после нажатия Enter.
И еще, заметьте, что скрытие иконки по щелчку вне ее или поля которому она принадлежит, будет работать корректно только для строк таблицы содержащих эту пару элементов. То есть, например, если щелкнуть по "звездочке" первой строки таблицы, то иконка тоже не исчезнет. Писать на "все случаи жизни" я не стал, для этого нужно знать все условия использования этого "шедевра". )

Спасибо вам огромное, теперь все условия соблюдены в полной мере. Большего не нужно. :)