Можно ли на 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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

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

	Можно ли на JavaScript создать упрощенную виртуальную клавиатуру? 04.07.2013, 08:32. Показов 10743. Ответов 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