Можно ли на JavaScript создать упрощенную виртуальную клавиатуру?

@седьмой · Регистрация: 11.07.2012

Студворк — интернет-сервис помощи студентам

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

Добавлено через 41 секунду
или это все делается на html ?

z-z · 04.07.2013, 08:59

можно наверно

например вот набросал что-то типа пробника. далее можно наворачивать и наворачивать)) jquery и jquery ui подключил для удобства и быстроты, их можно и не использовать

только без них сложнее все будет, ну для меня по крайней мере))
вот то, что набросал:

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE HTML>
<html>
  <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css">
    
    <style>
      #keyboard{
        background: #ccc;
        width: 100px;
        height: 100px;
        cursor: move;
      }
      button{
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <textarea id="txt"></textarea>
    
    <div id='keyboard'>
      <button>а</button>
      <button>б</button>
      <button>в</button>
      <button id='backspace'>&lt;-</button>
    </div>
    <script>
 
      $(function(){
        $('#keyboard').draggable();
        $('button').click(function(){
          if($(this).attr('id') == 'backspace'){
            $('textarea').text($('textarea').text().substring(0, $('textarea').text().length - 1));
          }
          else{
            $('textarea').append($(this).text());
          }
        })
      })
 
 
    </script>
 
  </body>
</html>

для кнопок вверх и вниз надо копать, как их заставить правильно работать внутри textarea, я не знаю) может кто-то другой подскажет...

тут можно посмотреть, как это работает http://learn.javascript.ru/play/dsHe1

@седьмой · 09.07.2013, 09:24 **[ТС]**

здорово спасибо огромное

Добавлено через 40 минут

Сообщение от z-z

для кнопок вверх и вниз надо копать, как их заставить правильно работать внутри textarea, я не знаю) может кто-то другой подскажет...

тут можно посмотреть, как это работает http://learn.javascript.ru/play/dsHe1

мне нужно перемещение не внутри одного поля, а с одного поля на другое, иными словами к кнопкам буквы и обратное стирание добавить еще кнопку TAB и Alt+Tab

z-z · 09.07.2013, 09:52

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<textarea id="txt"></textarea>
<textarea id="txt1"></textarea>
<textarea id="txt2"></textarea>
    
<div id='keyboard'>
  <button>а</button>
  <button>б</button>
  <button>в</button>
  <button id='backspace'>&lt;-</button>
  <button id="tab">tab</button>
  <button id="altTab">alt+tab</button>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(function(){
        $('#keyboard').draggable();
        
        $('textarea').focus(function(){
          $('textarea').removeClass('active');
          $(this).addClass('active');
        })
        
        $('button').click(function(){
          if($(this).attr('id') == 'backspace'){
            $('textarea.active').text($('textarea.active').text().substring(0, $('textarea.active').text().length - 1));
            $('textarea.active').focus();
          }
          else if($(this).attr('id') == 'tab'){
                if($('textarea.active').index() != $('textarea').length-1)
                    $('textarea.active').next().focus();
                else $('textarea.active').focus();
          }
          else if($(this).attr('id') == 'altTab'){
                if($('textarea.active').index() != 0)
                    $('textarea.active').prev().focus();
                else $('textarea.active').focus();
          }
          else{
            $('textarea.active').append($(this).text());
            $('textarea.active').focus();
          }
        })
      })

http://learn.javascript.ru/play/tJKpgc

@седьмой · 11.07.2013, 09:28 **[ТС]**

z-z
спасибо огромное все супер...
а если будет не 3 поля, а четыре, код изменится?

Добавлено через 5 минут
да работает и на 4х

Добавлено через 4 минуты
а кнопка может быть рисованная? а то стандартная очень мелкая для нажатия пальцем...

Добавлено через 36 минут
стилем css кнопки увеличиваются посредством увеличения шрифта, пока устроит, но на потом конечно лучше взять фотошопные, это можно?

z-z · 11.07.2013, 09:57

седьмой, конечно можно. Можно заменить на input или div, да на что угодно)) единственное - обработку нажатия на кнопки надо будет изменить немного. К примеру, замена на div:

HTML5
1
2
3
<button>а</button>
<!--меняем на -->
<div class="btn">a</div>

тогда поменяется немного скрипт

JavaScript
1
2
3
$('button').click(function(){
//меняем на что нибудь типа
$('.btn').click(function(){

вот... теперь есть класс btn, который вы можете редактировать так, как тлоько хочется. Главное не забывать приписывать этот класс всем кнопкам))

@седьмой · 11.07.2013, 09:59 **[ТС]**

все теперь наверно достаточно, спасибо!

z-z · 11.07.2013, 10:02

кстати для button тоже доступны любые стили, можно и размеры менять и фон и все, что захочется... но с фотошопной или ccs-ной кнопкой конечно не сравнится))

@седьмой · 11.07.2013, 10:44 **[ТС]**

Сообщение от z-z

кстати для button тоже доступны любые стили, можно и размеры менять и фон и все, что захочется... но с фотошопной или ccs-ной кнопкой конечно не сравнится))

да я согласен, но когда редко работаешь с css, то тонкости забываются, а с фотошопом проще когда объем небольшой... но у меня наверно к вам еще будут вопросы... не получается перенести код один в один в свою форму...

Добавлено через 13 минут
а тип поля INPUT можно использовать вместо textarea?

z-z · 11.07.2013, 10:57

input-ы использовать можно. только опять же надо подправить скрипт. везде, где идет обращение к textarea, заменить обращением к input... то есть грубо говоря во всем коде заменить textarea на input))

@седьмой · 11.07.2013, 13:06 **[ТС]**

Сообщение от z-z

input-ы использовать можно. только опять же надо подправить скрипт. везде, где идет обращение к textarea, заменить обращением к input... то есть грубо говоря во всем коде заменить textarea на input))

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

z-z · 11.07.2013, 13:08

седьмой, конечно кидайте)) вечером посмотрю...))

@седьмой · 12.07.2013, 08:35 **[ТС]**

Спасибо огромное за личку, идею понял, все проверю...

Добавлено через 17 минут
наверно уже последний вопрос, можно ли такую клавиатуру сделать поверх открытого окна, не для всех окон, а выборочно, пока не понимаю каким образом мене закрывать открытый файл например формата pdf, крестик в правом верхнем углу очень маленький и в него трудно попасть пальцем , да и не каждый догадается что нужно туда прицелиться, а сочетание клавиш Ctrl+F4 могли бы наверно его закрыть , но эту кнопку тогда нужно вывести поверх открытого окна, или это все делается как то иначе? Или нужно открывать документ не во весь экран и иметь панель с функциональными клавишами?

Добавлено через 18 минут
почему вместо пустого символа в поле пишется пробел?

HTML5
1
<button id='space'>Пробел</button>

вроде бы все по аналогии...

z-z · 12.07.2013, 09:00

Сообщение от седьмой

почему вместо пустого символа в поле пишется пробел?

потому что вы между тегами написали слово "пробел")) напишите что-то типа

HTML5
1
<button id='space'> </button>

между тегами обязательно пробел... если будет работать, конечно.

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

@седьмой · 12.07.2013, 13:08 **[ТС]**

вроде так пробовал, не работает, а стрелки в лево и в право? где вы берете эти коды, я смог найти только основные и то не все работают, я наверно сумбурно пишу - если делаем сайт, то пользователь его смотрит чаще на компе где есть и мышка и клавиатура и поэтому легко закрывает любую страничку нажимая на крестик в верхнем правом окне, а у меня киоск в поликлинике, где нет ни мышки ни привычной клавиатуры а только кнопочки для ввода текстовых данный, но в киоске кроме получения талончика на прием к врачу есть еще возможность просмотра допустим нормативных документов и вот когда бабушка легко нажмет большую кнопку просмотра документа (а у него к примеру формат pdf) то на крестик нажать что бы этот документ закрыть она может не догадаться и мне бы хотелось что бы поверх открытого окна была всего одна кнопка закрыть, к слову сказать у Майкрософт виртуальная клавиатура так и работает, она находится поверх любого документа.

z-z · 12.07.2013, 13:34

а в этом киоске как страницы отображаются? так же через браузер? какой браузер? или там их несколько?)) где pdf открывается? может для открытого pdf можно отдельно сверстать форму с кнопкой?

@седьмой · 12.07.2013, 14:14 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .

@седьмой 45 / 44 / 1 Регистрация: 11.07.2012 Сообщений: 1,024

	Можно ли на JavaScript создать упрощенную виртуальную клавиатуру? 04.07.2013, 08:32. Показов 10749. Ответов 16 Метки нет (Все метки) В вин 7 есть виртуальная клавиатура, но она очень громоздкая, можно ли средствами сабж написать аналогичную, но упрощенную, к примеру только стрелки вверх вниз и русские буквы, дайте пример хотя бы одной кнопки или ссылку на аналогичный материал, (у меня инфокиоск на рнр, к нему хочу добавить свою виртуальную клавиатуру вместо стандартной от вин-7) Добавлено через 41 секунду или это все делается на html ? 0

@седьмой 45 / 44 / 1 Регистрация: 11.07.2012 Сообщений: 1,024
	11.07.2013, 09:28 [ТС]
	z-z спасибо огромное все супер... а если будет не 3 поля, а четыре, код изменится? Добавлено через 5 минут да работает и на 4х Добавлено через 4 минуты а кнопка может быть рисованная? а то стандартная очень мелкая для нажатия пальцем... Добавлено через 36 минут стилем css кнопки увеличиваются посредством увеличения шрифта, пока устроит, но на потом конечно лучше взять фотошопные, это можно? 0

@седьмой 45 / 44 / 1 Регистрация: 11.07.2012 Сообщений: 1,024
	11.07.2013, 09:59 [ТС]
	все теперь наверно достаточно, спасибо! 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	11.07.2013, 10:02
	кстати для button тоже доступны любые стили, можно и размеры менять и фон и все, что захочется... но с фотошопной или ccs-ной кнопкой конечно не сравнится)) 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	11.07.2013, 10:57
	input-ы использовать можно. только опять же надо подправить скрипт. везде, где идет обращение к textarea, заменить обращением к input... то есть грубо говоря во всем коде заменить textarea на input)) 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	11.07.2013, 13:08
	седьмой, конечно кидайте)) вечером посмотрю...)) 1

@седьмой 45 / 44 / 1 Регистрация: 11.07.2012 Сообщений: 1,024
	12.07.2013, 13:08 [ТС]
	вроде так пробовал, не работает, а стрелки в лево и в право? где вы берете эти коды, я смог найти только основные и то не все работают, я наверно сумбурно пишу - если делаем сайт, то пользователь его смотрит чаще на компе где есть и мышка и клавиатура и поэтому легко закрывает любую страничку нажимая на крестик в верхнем правом окне, а у меня киоск в поликлинике, где нет ни мышки ни привычной клавиатуры а только кнопочки для ввода текстовых данный, но в киоске кроме получения талончика на прием к врачу есть еще возможность просмотра допустим нормативных документов и вот когда бабушка легко нажмет большую кнопку просмотра документа (а у него к примеру формат pdf) то на крестик нажать что бы этот документ закрыть она может не догадаться и мне бы хотелось что бы поверх открытого окна была всего одна кнопка закрыть, к слову сказать у Майкрософт виртуальная клавиатура так и работает, она находится поверх любого документа. 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	12.07.2013, 13:34
	а в этом киоске как страницы отображаются? так же через браузер? какой браузер? или там их несколько?)) где pdf открывается? может для открытого pdf можно отдельно сверстать форму с кнопкой? 0

@седьмой 45 / 44 / 1 Регистрация: 11.07.2012 Сообщений: 1,024
	12.07.2013, 14:14 [ТС]
	да я все вывожу через браузер, но наверно стандартного подхода нет, нужно искать частный... 0