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

Go to the English language version of this page

Сделано на основе страницы Klava.WinRus.com ( = porusski.net).
Там есть пояснения к работе, если что неясно.



Если Вы хотите 'встроить' данную Виртуальную Клавиатуру (где "ввод как дома" - см. чуть ниже) у себя на сайте/форуме/Гостевой Книге/Домашней странице:

уже подготовлены (и используются владельцами сайтов и форумов) разные способы "встраивания", подробно описанные на данной странице.

Можно даже "встроить", вставив всего две строки HTML в текст Вашей страницы (см. ниже)!
(одна строка - кнопка вызова; 2-я - крошечный загрузчик; остальные нужные файлы загрузятся только если пользователь на кнопку вызова нажмет)



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

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

На многих сайтах и форумах (phpBB, IPB, SMF, vBulletin) уже 'встроили' данную Виртуальную Клавиатуру, тот или иной вариант.
Для форума SMF уже есть готовый Мод, а для других - описание шагов встраивания (2-4 строки всего надо вставить), полученное от администраторов тех форумов, где встраивали.




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


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

Данная Виртуальная Клавиатура - современная, удобная, кириллица "на лету" получается, по мере нажатия клавиш обычной клавиатуры (хотя мышкой тоже можно);
под всеми основными браузерами работает в режиме "как дома" (пояснения см. на Klava.WinRus.com, справа от поля ввода), а лучше всего - под браузерами
   Opera, Mozilla (Firefox,Netscape), Internet Explorer.

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

Примечание.



Ниже - описание 2-х методов использования этой Виртуальной Клавиатуры на Вашем сайте, с работающими примерами

     
Если захотите поставить себе на сайт/форум/Домашнюю Страницу/Гостевую Книгу один из вариантов,
то пожалуйста, напишите мне на адрес (удалите пробелы до и после знака '@')
 PaulGor  @  compuserve.com  и я сообщу, как именно этот конкретный вариант воплотить -

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



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

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



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

Подробнее - после перечисления всех методов (или по ссылке "Метод 2" в предыдущей строке),
а вкратце о Методе 2:

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

Для этого метода сделаны маленького размера картинки Клавиатуры - раз на чужую страницу встраивается.




 

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

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



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

Под-варианты 1b и 1c можно и как отдельные страницы на Вашем сайте иметь, а не только в pop-up окошке.



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


 

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



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

Основная форма ввода:

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

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

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

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

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

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

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

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




 

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



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

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

 

Основная форма ввода:

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

То же самое, только красная кнопка в другом месте, под формой ввода -
чтобы иметь вызываемое окно поменьше размером по горизонтали:

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



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


   

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



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

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

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

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

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



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

Но сначала советую всё же посмотреть, какие варианты для встраивания предлагаются ниже (с работающими примерами).



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

Рассмотрим варианты, для удобства пояснений, в обратном порядке номеров (номера используются в качестве параметров вызова Клавиатуры):

Варианты 2, 3, 4 - в основном для случая, когда большинство посетителей форума/сайта пишут со своего собственного компьютера, с системными клавиатурными средствами, НЕ нужна им такая утилита, и только если некий пользователь (из тех, кто в меньшинстве) сознательно вызовет Клавиатуру нажатием кнопки, она будет работать.

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

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


В вариантax 3 и 4 утилита появляется под полем ввода,
а в вариантах 1 и 2 - в появляющемся "окошке" ("рамке"), которое похоже на pop-up окно из Метода 1 выше, но здесь это не "отдельная страница в новом окне", а просто часть той же страницы внутри тэга <div> показанная таким вот образом - в виде "рамки".



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

  




 

Параметры (практически все - НЕобязательные)
настройки Виртуальной Клавиатуры по желанию владельцев форума/сайта



Параметры есть только у 'встраиваемого' варианта код Клавиатуры, сделанного специально для форумов (и поэтому картинка меньше размером), то есть для описанного выше Метода 2.
Плюс варианты (c) и (d) Метода 1, так как в них используется тот же специально для форумов написанный код Клавиатуры.

  1. JavaScript файлы загружаются и используются по-разному в зависимости от Варианта ("плавающая рамка", "рамка под полем ввода",...) из описанных выше на данной странице для Метода 2.

    Предлагается параметр - номер варианта, например:

    vkb_Variant = 1;

    По умолчанию номер Варианта = 2 ("плавающая рамка").



  2. Вы можете выбрать интерфейс Клавиатуры - русский или английский
    (все слова на экране Клавиатуры, названия раскладок, ....)

    По умолчанию интерфейс - русский, поэтому если хотите английский, то в строке параметров должен быть такой:

    vkb_InterfaceLanguage='E';



  3. Вы можете сами решить, нужна ли Вам обратная опция - "В латиницу" - это когда Вы пишете кириллицей обычным образом, с системной клавиатурой и "Ру/RU" в панели задач, а на экране получается латиница типа "privet" (см. как эта опция работает на странице Клавиатуры на http://porusski.net)

    Эта опция может быть нужна для SMS и т.п.

    vkb_ToLatin=true;

    По умолчанию - "false", то есть, нет на экране Клавиатуры такой опции.

     

  4. Вы можете сами решить, нужна ли Вам опция
    "когда режим клавиатуры 'чужого' компьютера - НЕ 'английский, США'"

    (что это за опция? См. как она работает и Пояснение к ней под картинкой на http://porusski.net)

    Если Вам такая опция нужна, то в строке параметров нужен вот такой:

    vkb_nonUS=true;

    По умолчанию значение - "false", то есть, НЕ нужна такая опция.

     

  5. Вы можете сами решить, какова будет начальная (при первом вызове Клавиатуры) раскладка Клавиатуры, то есть, для американского и других режимов - одна из Стандартных или одна из Фонетических, например, если хотите, чтобы была первая из списка Фонетических:
    vkb_KbdVariant = '1';

    По умолчанию значение - "30" (Стандартная русская).

    Примечание. Если захотите задать значение для НЕамериканского клавиатурного режима, то тогда НЕ забудьте так же задать  vkb_nonUS=true;  (этот параметр был описан выше, перед данным).

    Вот здесь - весь список числовых значений для данного параметра:   Параметр 'стартовой раскладки' Виртуальной Клавиатуры

     

  6. Вы можете сами решить - для варианта 2, когда Клавиатура работает в рамке/окошке - как себя это окошко будет вести:

    vkb_Fix = true;

    По умолчанию значение - false, то есть, окошко в Варианте 2 можно двигать по экрану.



     

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

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

    Если Вы хотите иметь "Выключено" при старте, как начальное, то с списке параметров надо иметь следующее:

    vkb_CyrOnOffInit=false;

    По умолчанию (то есть, если параметра нет) значение - "true", то есть, "Включено".

       

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

    Для обычных встраиваний (на форуме например) Клавиатура ведь сразу НЕ видна - чтобы в глаза не бросалась, если пользователю не нужна, и чтобы страницу зря не 'утяжелять'.
    Появляется только если пользователь сознательно нажмет кнопку вызова...

    А вот если это отдельная страница, то надо, чтобы сразу была видна.
    Тогда в списке параметров надо иметь следующее:

    vkb_InitShow=true;

    По умолчанию (то есть, если параметра нет) значение - "false", то есть, Виртуальная Клавиатура не видна, появляется только по нажатию клавиши.

    Опять же, это только для вариантов 3 и 4 - в случае, если кому именно так захотелось на отдельной странице сделать (когда встраивается 2-3 строками, картинка небольшая по размеру; с загрузчиком, надо ждать 1-й раз пока весь код загрузится),
    а не так, как описано для обычного случая "Клавиатура - на отдельной странице", где картинка по размеру не уменьшенная, где предлагается прямо на странице иметь весь HTML код Клавиатуры, где поэтому не надо ждать пока код загрузится -
    см. под-варианты (c) и (d) Варианта 1 Метода 1.




 

Реже используемые параметры






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


Paul Gorodyansky. 'Cyrillic (Russian): instructions for Windows and Internet'