Как зафиксировать нажатия клавиш в Интернете?

Используя PHP, JS или HTML (или что-то подобное), как я могу захватить нажатия клавиш? Например, если пользователь нажмет ctrl+f или даже просто f, произойдет определенная функция.

++++++++++++++++++++++++EDIT+++++++++++++++++++++ Хорошо, это правильно, потому что я не могу заставить его работать. И я извиняюсь за свою небрежность, это простой вопрос, новый для jQuery и все еще изучающий JS все больше и больше.

<script>    
var element = document.getElementById('capture');
    element.onkeypress = function(e) { 
       var ev = e || event;
       if(ev.keyCode == 70) {
          alert("hello");
       }
    }
</script>
<div id="capture">
Hello, Testing 123
</div>

++++++++++++++++ РЕДАКТИРОВАТЬ++++++++++++++++++++

Вот все, но я не могу заставить его работать:

<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
* {
margin: 0px
}  

div {
    height: 250px;
    width: 630px;
    overflow: hidden;
    vertical-align: top;
    position: relative;
    background-color: #999;
}
  iframe {
    position: absolute;
    left: -50px;
    top: -130px;
  }
</style>
<script>
document.getElementsByTagName('body')[0].onkeyup = function(e) { 
   var ev = e || event;
   if(ev.keyCode == 70 && ev.ctrlKey) { //control+f
      alert("hello");
   }
}
</script>
<div id="capture">
Hello, Testing 123<!--<iframe src="http://www.pandora.com/" scrolling="no" width="1000" height="515"frameborder="0"></iframe>-->
</div>

+++РЕДАКТИРОВАНИЕ++++

Благодаря Джейкобу я думал, что исправил это, но когда я попробовал это в FF и IE (в настоящее время использую хром, который работал), это не сработало. Этот сценарий предназначен только для личной страницы, которую буду видеть только я, так что это не самое большое дело, но для дальнейшего использования я просто хотел бы знать, почему это не работает ни в IE, ни в FF.


javascript php function input keystroke
person Sean    schedule 26.12.2010    source источник

Ответы (4)


arrow_upward
11
arrow_downward

Конечно, единственный способ сделать это — использовать JavaScript, и вы должны сделать это следующим образом:

window.onload = function() {
   document.getElementsByTagName('body')[0].onkeyup = function(e) { 
      var ev = e || event;
      if(ev.keyCode == 70) {//&& ev.ctrlKey) {
         //do something...
      }
   }
};

Чтобы узнать нужный код ключа, см. эту статью: http://www.webonweboff.com/tips/js/event_key_codes.aspx

пример jsFiddle

person Jacob Relkin    schedule 26.12.2010
comment
Вы можете протестировать его на JS Fiddle? Он открывает опцию поиска в браузере, когда я нажимаю Ctr + F в предоставленной вами ссылке. - person Naveed; 26.12.2010
comment
Только что попробовал заменить do_something(); с предупреждением («привет»), и ничего не происходит, когда я нажимаю ctrl + f. Я попытался стереть && ev.ctrlKey и нажал только f, но безуспешно. - person Sean; 26.12.2010
comment
@NAVEED Вам нужно сосредоточиться на <iframe> в правом нижнем углу. - person Jacob Relkin; 26.12.2010
comment
@Sean Какой браузер ты используешь? - person Jacob Relkin; 26.12.2010
comment
Кстати, я бы предпочел, чтобы было просто f, потому что в то время я об этом не думал, но да, ctrl+f открывает поиск. - person Sean; 26.12.2010
comment
@Sean У меня это работает в примере с jsFiddle, в Firefox, IE и Chrome. - person Jacob Relkin; 26.12.2010
comment
@Sean В приведенном выше примере вы не переносите код в обработчик onload. Скопируйте-вставьте мой обновленный код и попробуйте. - person Jacob Relkin; 26.12.2010
comment
@Jacob Relkin: я сосредоточил внимание на разделе Result jsFiddle, но не получил предупреждения. Я использую Google Chrome. Какой браузер вы используете? - person Naveed; 26.12.2010
comment
@Sean в некоторых (старых) браузерах им не удается передать объект события обработчику, поэтому эта строка в основном устанавливает ev равным переданному объекту, если он существует, в противном случае он возвращается к глобальный event объект. - person Jacob Relkin; 26.12.2010

arrow_upward
1
arrow_downward

Вы ищете события javascript, связанные с нажатиями клавиш. Здесь есть некоторые раздражающие несовместимости браузеров, поэтому вам лучше всего использовать библиотеку JS, например jQuery, где вы можете использовать метод jQuery keypress(), но вы можете получить нужные данные из события javascript onkeypress.

person Charlie Martin    schedule 26.12.2010
comment
Ааа... хорошо, как я уже сказал, я делаю это для чего-то личного, а не публичного, поэтому совместимость с браузером не имеет большого значения. - person Sean; 26.12.2010

arrow_upward
0
arrow_downward

Использование jQuery:

Вы можете сделать это с помощью jQuery Keydown

Хорошая статья о регистрации различных ключевых событий:

Работа с событиями в jQuery

ИЗМЕНИТЬ:

JavaScript

Вот хорошие статьи, чтобы сделать это в javascript с хорошей DEMO:

person Naveed    schedule 26.12.2010
comment
@NAVEEED OP не использует jQuery. - person Jacob Relkin; 26.12.2010
comment
@Джейкоб Релкин: Хмммм. Хорошо, но я думаю, что OP не знает о jQuery. Поэтому будет предложено использовать jQuery, чтобы сделать это легко. - person Naveed; 26.12.2010
comment
jQuery в этой ситуации не нужен. DOM довольно хорошо обрабатывает события клавиатуры, и современные браузеры хорошо его поддерживают. На самом деле, большинству вещей вообще не нужен jQuery. - person Delan Azabani; 26.12.2010
comment
Я полностью согласен с @Delan - person Jacob Relkin; 26.12.2010

arrow_upward
0
arrow_downward

Вам лучше фиксировать все клавиши в окне, а не фиксировать нажатия клавиш на определенном элементе, как в других упомянутых ответах.

поэтому, используя собственный javascript:

window.onload = function (){
 eventHandler = function (e){
    if (e.keyCode == 70 && e.ctrlKey)
    {
      //do stuff
      //console.log(e);
    }
  }

  window.addEventListener('keydown', eventHandler, false);
}

используя JQuery:

$(document).ready(function(){
  $(window).keydown(function (e) {
    if (e.keyCode == 70 && e.ctrlKey)
    {
        //do stuff
    }

  });
});
person Amjad Masad    schedule 26.12.2010