onKeyPress вообще не работает!

У меня есть 5 тегов div с возможностью щелчка, на экране div отображается желтый квадрат с числом внутри. Когда пользователь щелкает квадрат, цвет квадрата меняется, показывая, что щелкнутый квадрат является «активным» квадратом (эта часть работает отлично). Затем пользователь должен иметь возможность нажимать номер. Когда номер нажата, номер, отображаемый в div, должен измениться на номер, который они нажали!

НО ... Не работает! в качестве атрибута div у меня есть onkeypress = "(функция для изменения innerHTML тега)".

Для тестирования я написал onkeypress = "alert ('key');" в качестве атрибута div, чтобы узнать, была ли это моя функция javascript или сам onKeyPress! но предупреждение даже не отображается!

Я попытался поместить предупреждение onKeyPress в тег body, и все сработало. это просто div! Я также пробовал нажимать клавишу до того, как щелкнул div, и после того, как щелкнул div!

Еще пробовал onkeydown и onkeyup!

Я действительно не вижу проблемы! Код следующий:

<html>
<head>
<style type="text/css">
#grid {
    position:absolute;
    padding: 0;
    border:0;
    width:370px;
    height:370px;
}
.box
{
    position:absolute;
    border: 2px solid Black;
    height: 50px;
    width: 50px;
    vertical-align: middle;
    text-align: center;
    background-color: yellow;
    font-size: xx-large;
    color:Navy;
    font-family: Arial;
    margin:10px;
    line-height:1.6;
}
.boxActive
{
    background-color:Aqua;
}
</style>

<script type="text/javascript>
function clicked(id) {
    reset();
    $(id).addClass('boxActive');
}
</script>

<script type="text/javascript" src="JQuery.js"></script>

</head>
<body>
    <div id="grid">
        <div id="cell_0_0" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:0%; ">0</div>
        <div id="cell_0_1" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:20%; ">0</div>
        <div id="cell_0_2" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:40%; ">0</div>
        <div id="cell_0_3" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:60%; ">0</div>
        <div id="cell_0_4" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:80%; ">0</div>            
    </div>
</body>
</html>

Может ли кто-нибудь предложить, как исправить это, ИЛИ метод изменения innerHTML тегов div, когда пользователь щелкает div и нажимает клавишу!

Спасибо!!!

Алекс


person AlexMorley-Finch    schedule 19.05.2011    source источник


Ответы (4)


Недавно я столкнулся с подобной проблемой. Я думаю, что вам нужно сделать так, чтобы ваш DIV получил фокус. Ответ на этот вопрос должен помочь - по сути, добавьте атрибут tabindex в DIV.

person Community    schedule 19.05.2011

onkeypress запускается только для «активного» поля при нажатии клавиши.

Подсказка здесь - слово «поле» - по умолчанию <div> элементы не могут стать «активными»; только поля ввода.

Вы можете получить некоторую радость, сделав что-то вроде tabindex="-1" в качестве атрибута в <div>, но я не могу гарантировать, что это сработает, и я еще не пробовал. Даже в этом случае вам, возможно, придется вручную setFocus() работать с элементом.

(обратите внимание на то, что последняя часть этого ответа взята из другого места на SO: Можно ли сфокусироваться на ‹div› с помощью функции javascript focus ()?)

person Spudley    schedule 19.05.2011

Я не думаю, что вы можете использовать событие onkeypress для элемента div, поскольку это элемент контейнера, а не элемент ввода.

Если вы поместите нажатие клавиши напротив тела, как вы описали ранее, вы можете прочитать значение нажатия клавиши, чтобы идентифицировать div по идентификатору. Когда у вас есть div, вы можете при необходимости изменить стиль / класс.

person Brian Scott    schedule 19.05.2011

Добавьте tabindex="0" в свой div. Это сделает его «фокусируемым». Тогда событие нажатия клавиши будет работать.

Рабочий пример фокусировки и нажатия клавиши: http://jsfiddle.net/nYLqA/ (щелкните поле и нажмите клавиша) (смена цвета отключена)

Если вы используете tabindex="-1", вам нужно будет щелкнуть, чтобы сфокусировать его. Если вы используете tabindex="0", то щелчок или клавиша tab позволят вам сосредоточиться на нем.

Также, если вы используете этот маршрут, я рекомендую

  • Попробуй это. Убедитесь, что он работает в нужных вам браузерах (в основном это тестовый IE 7, а не совместимый с 8/7)
  • Используйте onfocus и onblur вместо onclick, чтобы изменить свой цвет. Если вас не волнует IE 7, вы можете использовать CSS :focus для изменения цвета. (работает как CSS :hover)
person 700 Software    schedule 19.05.2011