Примеры использования Виртуальной Клавиатуры на Вашем сайте

Сделано на основе страницы Klava.RusWin.net.
Там есть пояснения к работе, если что неясно.

Ошибка! В Вашем браузере отключён JavaScript!
Виртуальная Клавиатура работать не будет... :(

Виртуальные Клавиатуры используются для "искусственного получения кириллицы" в ситуации "чужой компьютер", например, Интернет-кафе в Турции во время отпуска, то есть, когда НЕТ системных клавиатурных средств для ввода кириллицы.

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

Работает под всеми основными браузерами в режиме "как дома" (пояснения см. на Klava.RusWin.net, справа от поля ввода), а лучше всего - под браузерами

   Opera, Mozilla (Firefox,Netscape), Internet Explorer.

На странице Виртуальной Клавиатуры работают 'подсказки' ('tool tip'), которые видно, если подвести мышку к "Справке" на рисунке раскладки или к любой из ссылок там.

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

Примечание.

• По запросам 'забугорников' на http://Klava.RusWin.net появилась новая опция (не обязательная, если себе захотите Клавиатуру поставить, есть параметр её включения) -
  

  Если системная клавиатура чужого компьютера - НЕ в режиме 'английский, США EN'

• По запросам, на http://Klava.RusWin.net была добавлена опция "В латиницу", то есть, для противоположного режима - получения латиницы из кириллицы ("жили-->zhili") "на лету", по мере нажатия клавиш при обычном системном вводе кириллицы, при "RU/Ру".
  Это если надо кому-то именно латиницу отослать.
  Опция не обязательная, если себе захотите Клавиатуру поставить, есть параметр её включения.

я сообщу, как именно этот конкретный вариант встраивания воплотить -

где нужные файлы (в виде .zip) лежат; какие есть параметры настройки (например, какая раскладка при первом вызове и т.д.); как именно можно "встроить" Клавиатуру в программный код Вашего сайта/форума и т.п.

 
Условия использования на Вашем сайте программного кода данной Виртуальной Клавиатуры простые :

• бесплатно
• программный код - открытый (Open Source), под соответствующей лицензией GPL, поэтому люди могут себе брать, встраивать, изменять под свои нужды и т.п. - просто оставив имя автора, где оно было, как того лицензия GPL требует.

На многих сайтах и форумах (phpBB, IPB, SMF, vBulletin) уже 'встроили' данную Виртуальную Клавиатуру, тот или иной вариант (могу ссылки дать).

Метод 1.  Виртуальная Клавиатура - на отдельной странице

Подробнее - по ссылке "Метод 1" в предыдущей строке, а вкратце о вариантах Метода 1:

• Вариант 1.  Виртуальная Клавиатура (весь HTML код) расположена на отдельной странице (Вашего сайта или моего)
  и:
  • Вы или отсылаете пользователей на эту отдельную страницу для ввода кириллицы, где после ввода они скопируют текст в системный буфер и потом вставят в поле на другой Вашей странице (Copy/Paste)

  • или Вы на некой своей странице показываете в pop-up окошке ту отдельную страницу с Виртуальной Клавиатурой (где после ввода пользователь скопируют текст в системный буфер и потом вставит в поле ввода на вызывающей странице (Copy/Paste))

• Вариант 2.  Виртуальная Клавиатура тоже является самостоятельной страницей (.html файл), но используется только в pop-up окошке на некой Вашей странице и в отличие от Варианта 1 пользователю НЕ надо для переноса текста в основное поле ввода самому делать выделение/копирование/вставку - это происходит автоматически по нажатию кнопки в окошке Клавиатуры.

Метод 2.  Виртуальная Клавиатура НЕ на отдельной странице, а работает непосредственно в поле ввода Вашего сайта или форума.

Подробнее - по ссылке "Метод 2" в предыдущей строке, а вкратце:

при использовании этого метода Виртуальная Клавиатура встраивается прямо в HTML код некой Вашей страницы (нужно вставить всего пару строк) и работает непосредственно в Вашей основной форме ввода, то есть нет ввода в отдельном окошке с последующим копированием:
ввод/корректировка русского текста происходит прямо в Вашем поле ввода.

Для этого метода сделаны маленького размера картинки Клавиатуры - раз на чужую страницу встраивается.
На картинке для (дополнительного) ввода мышкой работают все нарисованные кнопки - Del, пробел, Enter, Caps, Shift, Backspace

• Во всех вариантах этого метода изначально Клавиатуры НЕ видно, она появляется, только если человек вызовет её, и убирается по желанию, то есть, кому не нужна - места на экране НЕ занимает.

Метод 3.  Это 'смесь' предыдущих двух.

Подробнее - по ссылке "Метод 3" в предыдущей строке, а вкратце:

• Виртуальная Клавиатура - как в Методе 1 - на отдельной странице, на которую отсылается посетитель Вашего сайта или Вы её показываете в pop-up окне

• Но программный код - от Метода 2, поэтому:
  • картинка меньше (что может быть желательно для pop-up окна);
    на картинке для (дополнительного) ввода мышкой работают все нарисованные кнопки - Del, пробел, Enter, Caps, Shift, Backspace
  • На той отдельной странице Вам не надо весь HTML код Клавиатуры иметь, достаточно двух-трех строк.
    Это может быть удобно, если "отдельная страница" - не только для Клавиатуры, там ещё и Ваши вещи есть.

Метод 1.
Виртуальная Клавиатура - на отдельной странице

На Виртуальной Клавиатурe работают 'подсказки' ('tool tip'), которые видно, если подвести мышку к "Справке" на рисунке или к любой из ссылок там.

• Вариант 1. Отсылать пользователя на эту отдельную страницу или показывать её в pop-up окне на другой странице. После ввода - выделить текст и скопировать (Copy/Paste) в нужное место

• Вариант 2. Вводить в pop-up окне (где показана та отдельная страница), но не требуется выделять текст и делать Copy/Paste - текст сам появляется в основной форме ввода по нажатию кнопки в этом окошке

 
В Варианте 1   -   4 под-варианта (а,b,c,d):

• В случае 1а вызывается страница с моего сайта
• в остальных случаях - 1b, 1c, 1d - можно и с моего, но логичнее Вам взять мой скрипт и себе на сайт поставить
  (напишите мне письмо, если какой-то из этих вариантов понравится, я тогда скажу, где файлы брать,...)

В Варианте 2 - сделано специально для показа в pop-up окошке (с автоматическим копированием в основную форму ввода) - Вам обязательно надо мои файлы себе на сервер взять, чтобы на том же сайте был, что и страница с основной формой ввода, иначе авто-копирование не может работать.

Работающие примеры Метода 1 - Вариант 1

Вариант 1.  Имеет четыре под-варианта (а,b,c,d), ссылка или кнопка в каждом, после ввода сами копируете текст в нужное место:

1a  В окошке открывается основная страница Клавиатуры моего сайта, screen_r.htm:

  Виртуальная Клавиатура   Виртуальная Клавиатура

 
1b  В окошке (или на отдельной странице) - 'облегчённая' версия моей Клавиатуры, без текста пояснений по режимам (можете и себе эту версию взять; использовать или в окошке или как отдельную страницу):

  Виртуальная Клавиатура   Виртуальная Клавиатура

 
1c  В окошке (или на отдельной странице) - ещё более 'облегчённая' версия моей Клавиатуры - меньше места занимает на экране - так как меню раскладок спрятано и пояснений ещё меньше, чем в предыдущем варианте
(можете и себе эту версию взять; использовать или в окошке или как отдельную страницу):

  Виртуальная Клавиатура   Виртуальная Клавиатура

 
1d  В окошке - совсем мало занимающая места версия моей Клавиатуры - меньше места занимает на экране по горизонтали, чем в предыдущем варианте 1c
(можете и себе эту версию взять; в отличие от (b) и (c) наверное имеет смысл использовать в окошке, а не как отдельную страницу):

  Виртуальная Клавиатура   Виртуальная Клавиатура

Работающие примеры Метода 1 - Вариант 2

Вариант 2  В pop-up окошке отрывается страница с дополнительной красной кнопкой для автоматического переноса текста в основную форму ввода (то есть, не нужно "вручную" Выделять/Copy/Paste) - тоже как ссылка или кнопка.

Чтобы так работало, Вам надо файлы моей Клавиатуры себе на сайт взять, чтобы на том же сайте были, что и страница с основной формой ввода - иначе авто-копирование не работает (напишите мне письмо, если именно так захотите, я тогда скажу, где файлы брать и как настроить - одну строку заменить).

Конец описания Метода 1 и его вариантов

Метод 2.
Встроить в код Вашей страницы, чтобы работало прямо в Вашем поле ввода.
Нет отдельного "pop-up" окна.

Виртуальная Клавиатура работает непосредственно в основном поле ввода, не надо "в другом окне" сначала вводить, а потом копировать.

Javascript Клавиатуры работает с DOM и сам находит все поля ввода на странице и настраивается на работу в любом из них.
Поэтому для 'встраивания' Виртуальной Клавиатуры на Вашу страницу надо всего две строки HTML вставить обычно - кнопка вызова Клавиатуры и строка вызова крошечного загрузчика (остальные файлы Клавиатуры будут загружены только если некий пользователь нажмет кнопку вызова).

На странице Виртуальной Клавиатуры работают 'подсказки' ('tool tip'), которые видно, если подвести мышку к "Справке" на рисунке или к любой из присутствующих там ссылок.

Работают cookies, то есть пришедший снова пользователь сразу видит свою раскладку, с которой последний раз работал.

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

Опять же, обычно, чтобы эта Виртуальная Клавиатура сама "прицепилась" к полю(полям) ввода на Вашем сайте/Гостевой Книге/форуме, нужно добавить всего одну-две строки в код той страницы:

• одну строку в заголовке страницы - для вызова маленького (10k) загрузчика
• код самой кнопки вызова - чтобы Вы могли сами поменять её вид, цвет или расположение на странице.

Напишите мне e-mail, и я сообщу, как именно тот или иной из показанных ниже вариантов 'встраивания' воплотить - где нужные файлы (в виде .zip) лежат, ...

Есть три варианта такого метода (работающие примеры для каждого - ниже), то есть, когда Клавиатура является частью Вашей страницы (а не на отдельной странице и не в отдельном pop-up окне).

Первые два - в основном для случая, когда большинство посетителей пишут со своего собственного компьютера, с системными клавиатурными средствами, НЕ нужна им Виртуальная Клавиаутра, и только если некий пользователь сознательно вызовет Клавиатуру нажатием кнопки, она будет работать.

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

В третьем варианта (когда многим посетителям он Клавиатура нужна) Виртуальная Клавиатура сразу работает в режиме ввода с обычной клавиатуры (под формой ввода - её переключатель 'Вкл/Выкл'), а кнопка вызова утилиты показывает остальные элементы утилиты (картинка; сменить раскладку; вводить мышкой).

В первом варианте утилита появляется под полем ввода,
а во втором и третьем - в появляющейся "рамке" - это не pop-up окно, где отдельная страница показана, а просто часть той же страницы внутри тэга <div> показанная таким вот образом - в виде рамки.

Итак, вот эти 3 варианта и работающие примеры:

• Вариант 1.

  Когда Клавиатура расположена под полем ввода на сайте (ниже будет работающий пример, увидите)

  Здесь есть два под-варианта:

  1.1 Клавиатуру (картинку раскладки, управляющие элементы) НЕ видно сразу, есть только кнопка её вызова.
  Например, в Гостевой Книге сайта или у поля ввода поиска...

  По нажатию кнопки "Виртуальная Клавиатура" она появляется под полем ввода
  и только тогда начинает работать (клавиатурный или "мышиный" ввод кириллицы, по желанию).

  Этот вариант показан на отдельной странице (в новом окне откроется):

  scr_box1.htm

  1.2 То же самое, что в предыдущем варианте, только элементы Клавиатуры занимают меньше места по горизонтали - нет управляющих элементов справа от картинки раскладки, все элементы - под картинкой.

  Этот вариант показан на отдельной странице (в новом окне откроется):

  scr_box2.htm

   
  

• Вариант 2.

  По нажатию кнопки "Виртуальная Клавиатура" сама Клавиатура (картинка и меню раскладок) появляется в рамке
  и только тогда начинает работать (клавиатурный или "мышиный" ввод кириллицы, по желанию).

  Здесь есть два под-варианта (2.1 и 2.2):

  2.1 Рамку можно двигать по экрану, схватив мышкой за заголовок.

  Этот вариант показан на отдельной странице (в новом окне откроется):

  scr_fly2.htm

  2.2 То же самое, что в предыдущем варианте, только рамка - в углу страницы, фиксированно, независимо от вертикального или горизонтального скроллирования страницы.

  Это - для форм с большим количеством полей ввода (например, вот такой: http://dag.com.ua/people/registration.php), где иначе, с предыдущим вариантом, щёлкнув по кнопке вызова Клавиатуры находящейся, например, в самом низу страницы, пришлось бы долго, в несколько этапов, передвигать Клавиатуру на самый верх страницы, чтобы ввод с первого поля начать. И потом всё время двигать к нужному участку формы ввода...

  А при данном варианте это легко - проскроллировал страницу и сразу наверх попал.

  Этот вариант показан на отдельной странице (в новом окне откроется):

  scr_fix.htm

   
  

• Вариант 3.

  Виртуальная Клавиатура сразу работает в режиме получения кириллицы с обычной физической клавиатуры, даже когда не видны картинка раскладки и меню раскладок.
  Под полем ввода - её переключатель ввода с клавиатуры - "Вкл/Выкл".

  По нажатию же кнопки вызова, в рамке появляется 2-я часть Клавиатуры - с картинкой текущей раскладки и с меню выбора раскладок.
  При этом начинает, кроме обычного клавиатурного, работать и "мышиный" ввод (если кому надо), то есть, вводить, щёлкая по букве на картинке клавиатуры.

  Рамку можно двигать по экрану, "схватив" мышкой за заголовок.
  Этот вариант показан на отдельной странице (в новом окне откроется):

  scr_fly1.htm

Конец описания Метода 2 и его вариантов

Метод 3.

Клавиатура - на отдельной странице, куда посетитель отсылается для ввода кириллицы
или же Вы эту отдельную страницу показываете в "pop-up" окне.

Это 'смесь' предыдущих двух:

• Виртуальная Клавиатура - как в Методе 1 - на отдельной странице

• Но программный код - от Метода 2, поэтому:
  • На той отдельной странице Вам не надо весь HTML код Клавиатуры иметь, достаточно двух-трех строк
    Это может быть удобно, если "отдельная страница" - не только для Клавиатуры, там ещё и Ваши вещи есть.

  • картинка меньше (что может быть желательно для pop-up окна);
    на картинке для (дополнительного) ввода мышкой работают все нарисованные кнопки - Del, пробел, Enter, Caps, Shift, Backspace

Подготовлено 2 варианта для этого Метода 3 - они соответствуют первому варианту 'встраивания' Метода 2 -
Клавиатура - в рамке под полем ввода, более или менее широкая по горизонтали:

• 3.1 "широкий" вариант (больше места по горизонтали), удобно для отдельной страницы, куда отсылается посетитель для ввода кириллицы

  Работающий пример (в новом окне откроется):   scrbox1p.htm

• 3.2 "узкий" вариант (меньше места по горизонтали), удобно для страницы, которая показывается в pop-up окне - меньше окно

  Работающий пример (в новом окне откроется):   scrbox2p.htm

Напишите мне e-mail, и я сообщу, как именно тот или иной из вариантов воплотить - где нужные файлы (в виде .zip) лежат, ...

Конец описания Метода 3 и его вариантов