如何使用keydown事件設置變量？

Question

我創建了一個虛擬鍵盤作爲一個項目來學習，除其他事項外，jQuery的：http://brianfryer.1.ai/virtual-keyboard/index.html

當點擊屏幕上的按鍵，其相關的字符添加到文本區域。

然而，當鍵盤按鍵被按下時，什麼也沒有發生 - 關聯的字符應該被添加到textarea中。

我遇到的問題是clickedKey變量。將clickedKey設置爲一個靜態字符（即'm'）會產生所需的結果（將字符添加到textarea中），但我不認爲爲每個鍵創建大塊代碼是一個非常好的主意。

$(document).ready(function() { 

    // Find the textarea, and save it to var screen 
    var screen = $("#screen > textarea"); 

    $('li').not('.modifier, .short-key').click(function() { 
     // Find the first <span>, get the contents, trim away the whitespace, and save it to var txt 
     var txt = $(this).find(':first-child').text().trim(); 
     // Add the trimmed txt to the textarea 
     screen.val(screen.val() + txt); 
    }); 

    var clickedKey = $(document).keydown(function(event){ String.fromCharCode(event.keyCode); }); 

    KeyboardJS.bind.key(
     // Physical keyboard input 
     clickedKey, 
     // onDownCallback 
     function() { 
      // Make the on-screen key flash 
      $('#' + clickedKey).addClass('hover'); 
      // If the textarea has focus... 
      if ($('#screen > textarea').is(':focus')) { 
       // ...do nothing 
      } else { 
       // Add the trimmed txt from the first span to the textarea 
       var txt = $('.keys').find('#' + clickedKey).children(':first').text().trim(); 
       screen.val(screen.val() + txt); 
      } 
     }, 
     function() { 
      // After a key is clicked, remove the .hover class 
      setTimeout(function() { 
       $('.keys').find('#' + clickedKey).removeClass('hover'); 
      }, 100); 
     } 
    ); 

}); 

我使用keyboard.js作爲鍵綁定。

Answer 1

Keyboard.js旨在直接與js一起使用。您正在試圖通過一個jQuery事件對象給它，這就是爲什麼它返回一個錯誤：

Object [object Object] has no method 'toLowerCase' - Keyboard.js 

的解決辦法是隻使用JavaScript來獲得的keyPressed。 我這個添加到你的頭：http://robertwhurst.github.com/KeyboardJS/demo.js

添加到您的身體：<div class="demoReadout"></div>

爲我工作。現在你只需要將事件從那裏掛鉤到你的jQuery。 希望有所幫助。

Answer 2

使用答案我發現這裏（http://stackoverflow.com/a/2819568/1681875），我可以整理出以下（的作品）：

// "press" = you used your physical keyboard 
// "clicked" = you used your mouse to click the on-screen keyboard 

$(document).ready(function() { 

// Find the textarea, save it to var screen, and focus the cursor on it 
var screen = $("#screen > textarea"); 
screen.focus(); 

// Listen for when a (non-modifier, or non-function) key is clicked 
$('li').not('.modifier, .short-key').click(function() { 

    // Find the first <span>, get the contents, trim away the whitespace, and save it to var txt 
    var character = $(this).find(':first-child').text().trim(); 

    // Extend jQuery to insert characters at the caret 
    jQuery.fn.extend({ 
     insertAtCaret: function(character){ 
      return this.each(function(i) { 
       if (document.selection) { 
        //For browsers like Internet Explorer 
        this.focus(); 
        sel = document.selection.createRange(); 
        sel.text = character; 
        this.focus(); 
       } 
       else if (this.selectionStart || this.selectionStart == '0') { 
        //For browsers like Firefox and Webkit based 
        var startPos = this.selectionStart; 
        var endPos = this.selectionEnd; 
        var scrollTop = this.scrollTop; 
        this.value = this.value.substring(0, startPos)+character+this.value.substring(endPos,this.value.length); 
        this.focus(); 
        this.selectionStart = startPos + character.length; 
        this.selectionEnd = startPos + character.length; 
        this.scrollTop = scrollTop; 
       } else { 
        this.value += character; 
        this.focus(); 
       } 
      }) 
     } 
    }); 

    // Insert characters in the textarea at the current caret 
    screen.insertAtCaret(character); 
}); 

$(document).on({ 
    // Do this when a key is pressed 
    'keydown': function(event){ 
     // Get the value of the key being pressed and make sure it's lower case 
     key = (String.fromCharCode(event.keyCode)).toLowerCase(); 
     // Make the on-screen key flash for 100ms 
     $('#' + key).addClass('hover'); 
     // Focus on the textarea 
     $('#screen > textarea').focus(); 
    }, 
    // Do this when a key is let go 
    'keyup': function(event) { 
     // Get the value of the key being pressed 
     key = String.fromCharCode(event.keyCode).toLowerCase(); 
     // After a key is clicked, remove the .hover class 
     $('#' + key).removeClass('hover').delay(100); 
    } 
}); 

}）;

Answer 3

我是KeyboardJS的作者。

通過activeKeys方法獲得按鍵可能會有所幫助。這樣你就可以得到我用於特定鍵的確切名稱，並且你的綁定將起作用。

clickedKey = KeyboardJS.activeKeys()[0];