Экранная клавиатура

@OlegPL · Регистрация: 22.10.2013

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

Здравствуйте столкнулся с такой проблемой... Клавиатура вообще относительно работает нормально, но с одним но... Если нажать мимо кнопки, то получается что выводится содержимое ряда кнопок... Так же хотелось бы услышать адекватные пожелания по написанию кода...

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <div id="windowAndkeyboard">
            <div id="windowScreen"></div>
            <div id="keyboard">
                <div id="firstLine">
                    <div>q</div><div>w</div><div>e</div><div>r</div><div>t</div><div>y</div><div>u</div><div>i</div><div>o</div><div>p</div>
                </div>
                <div id="secondLine">
                    <div>a</div><div>s</div><div>d</div><div>f</div><div>g</div><div>h</div><div>j</div><div>k</div><div>l</div>
                </div>
                <div id="thirdLine">
                    <div>z</div><div>x</div><div>c</div><div>v</div><div>b</div><div>n</div><div>m</div>
                </div>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>

CSS
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
49
50
51
/* Общие настройки*/
* {
    margin: 0;
    padding: 0;
}
 
/*Обертка окна и клавиатуры*/
#windowAndkeyboard {
    max-width: 600px;
    min-width: 300px;
    border: 2px solid rgb(225,225,225);
    margin: 10px auto;
}
 
/*Экран для клавиатуры*/
#windowScreen {
    height: 150px;
    padding: 20px;
    font-size: 30px;
}
 
/*Обертка клавиатуры*/
#keyboard {
    margin: 0;
    padding: 10px 0 10px;
    background: linear-gradient(to top, rgb(75,75,75), rgb(225,225,225));
}
 
/*Ряды кнопок*/
#firstLine, #secondLine, #thirdLine {
    text-align: center;
}
 
/*Сами кнопки*/
#firstLine > div, #secondLine > div, #thirdLine > div {
    display: inline-block;
    font-size: 25px;
    border: 1px solid rgb(180,180,180);
    width: 30px;
    text-align: center;
    cursor: pointer;
    margin: 2px;
    border-radius: 3px;
    background-color: rgb(220,220,220);
    text-shadow: 1px 1px rgb(200,200,200);
}
 
/*Кнопки при нажатии*/
#firstLine > div:active, #secondLine > div:active, #thirdLine > div:active {
    background-color: rgb(150,150,150);
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function myClass(myScreen, myKeyboard) {
 
    this.screen = document.querySelector("#" + myScreen) || 0;
    this.keyboard = document.querySelector("#" + myKeyboard) || 0;
    this.keyboardLines = [];
    
    for(var i = 0; i < keyboard.childNodes.length; i++) {
        if(keyboard.childNodes[i].nodeType == 1) 
            keyboardLines.push(keyboard.childNodes[i]);
    }
    
    for(var i = 0; i < keyboardLines.length; i++) {
        keyboardLines[i].onclick = function(event) {
            var target = event.target;
            if(target == keyboard || target == keyboardLines[i])
                return;
            screen.innerHTML += target.innerHTML;
        };      
    }
    
}
myClass("windowScreen", "keyboard");

@kalabuni · 29.05.2014, 17:41

зачем такие сложности?
весь скриптовой блок замените на 3 строки:

JavaScript
1
2
3
(function () {for (var btns = document.getElementById ('keyboard').getElementsByTagName ('div'),
                          j = 0, J = btns.length; j < J; j++) with (btns [j]) if (!id)
onclick = function () {document.getElementById ('windowScreen').innerHTML += this.innerHTML}}) ();

Не по теме:

для разведчиков делаете?
шифротелеграммы так писаться будут?
без пробелов, без цифр, без знаков препинания и без верхнего регистра?
и без права на ошибку? :)

@OlegPL · 29.05.2014, 18:11 **[ТС]**

Была задача создать как бы класс... Забыл написать... И конструкцию with я как бы не понимаю..

Добавлено через 24 минуты
А если без with, то это как получиться?

@kalabuni · 29.05.2014, 18:19

with () - это просто
используется исключительно для сокращения количества символов в коде

т.е. вместо
object.prop1 = 12; object.prop2 = 'ok'; object.prop3 = false; object.prop4 = [1, 2, 3]; object.prop5 = {return true};

можно написать
with (object) {prop1 = 12; prop2 = 'ok'; prop3 = false; prop4 = [1, 2, 3]; prop5 = {return true}}

или даже ещё короче (без фигурных скобок):
with (object) prop1 = 12, prop2 = 'ok', prop3 = false, prop4 = [1, 2, 3], prop5 = {return true}

@Daredevi1 · 29.05.2014, 19:16

Лучше with не использовать

https://developer.mozilla.org/... ments/with

@kalabuni · 29.05.2014, 19:38

Daredevi1, не хотите, не используйте
но вот что это "лучше", когда не используешь - не утверждайте

как говорится, вы не любите кошек лишь потому, что не умеете их готовить

обоснование "'with' makes it hard for a human reader" из ссылки, что вы дали - оно не убеждает
а пример как бы возможной ошибки там просто идиотический

ситуация с with () напоминает идиотское утверждение А. Лебедева "фреймы - зло", получившее широчайшее распространение в Рунете
-----

дефиниция with () пережила все версии стандарта ECMA-262 и включена в последнюю 5 версию без каких-либо ограничений

@Daredevi1 · 29.05.2014, 20:02

>>"'with' makes it hard for a human reader"
Причина не только в этом.
Производительность? Безопасность? Strict Mode?

@kalabuni · 29.05.2014, 21:00

Сообщение от Daredevi1

Производительность? Безопасность? Strict Mode?

хе-хе...
волшебные слова
только напиши их - и вопросов не будет

производительность - можете привести в качестве примера код, где использование with () якобы настолько снижает производительность, что это становится проблемой?
и вообще, мне неизвестны исследования, где вообще доказывается, что использование with () хоть как-то влияет на производительность
а вам таковые известны?

безопасность - от чего? от себя-дурака?

Strict Mode - ну и кто из вменяемых людей этот режим использует?
смотрим самые популярные JS-коды: JQuery, Prototype, Raphael...
и -- О, УЖАС!!! -- нигде нет 'use sctrict', но везде есть многократное использование with ()

@Daredevi1 · 29.05.2014, 22:14

Сколько людей - столько мнений. Дальнейшая дискуссия безсмысленна

@kalabuni · 29.05.2014, 22:20

Сообщение от Daredevi1

Сколько людей - столько мнений.

не путайте моё мнение с вашей верой

мнение - оно на фактах основано
да, мнение бывает ошибочным, когда имярек не все факты знает или принимает во внимание непроверенные факты

а вот вера - человек просто верит в то... что Бог на небе сидит... что земля плоская... что with () лучше не использовать...

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

Новые блоги и статьи Все статьи Все блоги /
Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip
Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .	Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	Контроль уникальности заводского номера Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере нетипового документа выдачи шин для спецтехники с табличной частью, разработанного в конфигурации КА2. Данные берутся из. . .	Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git

@OlegPL 5 / 5 / 0 Регистрация: 22.10.2013 Сообщений: 103
	29.05.2014, 18:11 [ТС]
	Была задача создать как бы класс... Забыл написать... И конструкцию with я как бы не понимаю.. Добавлено через 24 минуты А если без with, то это как получиться? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	29.05.2014, 18:19
	with () - это просто используется исключительно для сокращения количества символов в коде т.е. вместо object.prop1 = 12; object.prop2 = 'ok'; object.prop3 = false; object.prop4 = [1, 2, 3]; object.prop5 = {return true}; можно написать with (object) {prop1 = 12; prop2 = 'ok'; prop3 = false; prop4 = [1, 2, 3]; prop5 = {return true}} или даже ещё короче (без фигурных скобок): with (object) prop1 = 12, prop2 = 'ok', prop3 = false, prop4 = [1, 2, 3], prop5 = {return true} 1

@Daredevi1 311 / 303 / 78 Регистрация: 09.05.2009 Сообщений: 723
	29.05.2014, 19:16
	Лучше with не использовать https://developer.mozilla.org/... ments/with 1

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	29.05.2014, 19:38
	Daredevi1, не хотите, не используйте но вот что это "лучше", когда не используешь - не утверждайте как говорится, вы не любите кошек лишь потому, что не умеете их готовить обоснование "'with' makes it hard for a human reader" из ссылки, что вы дали - оно не убеждает а пример как бы возможной ошибки там просто идиотический ситуация с with () напоминает идиотское утверждение А. Лебедева "фреймы - зло", получившее широчайшее распространение в Рунете ----- дефиниция with () пережила все версии стандарта ECMA-262 и включена в последнюю 5 версию без каких-либо ограничений 0

@Daredevi1 311 / 303 / 78 Регистрация: 09.05.2009 Сообщений: 723
	29.05.2014, 20:02
	>>"'with' makes it hard for a human reader" Причина не только в этом. Производительность? Безопасность? Strict Mode? 0

@Daredevi1 311 / 303 / 78 Регистрация: 09.05.2009 Сообщений: 723
	29.05.2014, 22:14
	Сколько людей - столько мнений. Дальнейшая дискуссия безсмысленна 0