1

jQuery などを学習するプロジェクトとして、仮想キーボードを作成しました: http://brianfryer.1.ai/virtual-keyboard/index.html

画面上のキーをクリックすると、それに関連付けられた文字がテキストエリアに追加されます。

ただし、キーボードのキーを押しても何も起こりません。関連する文字がテキストエリアに追加されます。

私が抱えている問題はclickedKey変数にあります。静的文字 (つまり、'm') に設定clickedKeyすると、望ましい結果が得られます (文字がテキストエリアに追加されます) が、キーごとに大きなコード ブロックを作成することはあまり良い考えではないと思います。

$(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を使用しています。

4

3 に答える 3

1

私はKeyboardJSの作者です。

activeKeysメソッドを介してキーを押すと役立つ場合があります。そうすれば、私が特定のキーに使用している正確な名前を取得でき、バインディングが機能します。

clickedKey = KeyboardJS.activeKeys()[0];
于 2012-09-29T23:27:33.747 に答える
1

Keyboard.js は、js で直接使用することを意図しています。jQuery イベント オブジェクトをそれに渡そうとしているため、エラーが返されます。

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

解決策は、javascript だけを使用してキーを押すことです。これを頭に追加しました：http://robertwhurst.github.com/KeyboardJS/demo.js

これをあなたの体に追加してください： <div class="demoReadout"></div>

それは私のために働いた。そこからイベントを jQuery にフックするだけです。それが少し役立つことを願っています。

于 2012-09-19T05:35:24.153 に答える
0

ここで見つけた回答 (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);
     }
});

});

于 2012-09-19T23:22:55.647 に答える