14

誰かがボタンをクリックすると、マウスを離す前にダウン状態になるボタンがあるとします。

ここで、代わりに誰かが「a」キーを押したとすると、キーが離されるまでボタンを下の状態にして、その時点でボタンがトリガーされるようにします。これは可能ですか？

4

3 に答える 3

13

ここでいくつかの調査を行った後、私が得た最終的な答えは次のとおりです。

を使用してボタン要素でイベントをトリガーすることができmousedownます 。ボタンがこれらのイベントに応じてスタイルを変更するようにプログラムされている場合は、問題ありません。mouseupkeyupkeydown

このフィドルの例を参照してください：http：//jsfiddle.net/FwKEQ/15/

jQueryのUIコンポーネントを使用する場合は、機能するよりも注意してください。ただし、標準のボタンの場合、JavaScriptを使用してボタンを押した状態に移動する方法はありません。

html：

<button id="jQbutton">Press 'A' to move me to pressed state</button>

Javascript：

<script>
    $( "#jQbutton" ).button();

    $(document).keydown(function(event) {
        if ((event.keyCode === 97)||(event.keyCode === 65))
            $("#jQbutton").mousedown();
    });

    $(document).keyup(function(event) {
        if ((event.keyCode === 97)||(event.keyCode === 65))
            $("#jQbutton").mouseup();
    });
</script>

編集：

私たちが利用できるハックがあるかもしれません：accesskeyボタン要素に使用してから、アクセスキーの押下をシミュレートしてみてください（可能かどうかはわかりません）ここで私は今のところhttp://jsfiddle.net/FwKEQにいます/ 28 /

編集2： このトピックをさらに調べてみると、次のことがわかりました。

  1. デフォルトのボタン（スタイルなし）はOSによってレンダリングされますが、その正式な証明は見つかりませんでしたが、Mac OSを使用して同じページを読み込もうとすると、WindowsでMacOSスタイルのボタンが表示されます。 「醜い」灰色のボタン。

  2. デフォルトのボタンはOSによってレンダリングされるため、ブラウザによって送信され、信頼されるイベントを意味するOSイベントに準拠しています。

  3. カスタムスタイルのボタンはCSSに準拠しているため、これは当てはまりません。JSは、押すと外観が変わるため、JQボタンはJSの影響を受けます。

したがって、要約すると、スタイルを変更するためにデフォルトのボタンで起動する信頼できるプレスイベントが必要になりますが、セキュリティ上の制約のためにこれを行うことはできません。

信頼できるイベントについてもう少し詳しくは、http ：//www.w3.org/TR/DOM-Level-3-Events/#trusted-eventsをご覧ください。

また、OSによってレンダリングされるデフォルトのボタンに関する正式なリファレンスを誰かが見つけた場合は、この回答にコメントまたは編集してください。

于 2013-04-19T07:02:38.983 に答える
8

残念ながら、デフォルトボタンでのアクティブ状態のレンダリングは、cssスタイルの単純な問題ではなく、javascriptを適用することで簡単に変更することもできません。

デフォルトのボタンでこれを行うオプションは、ホットキーjqueryプラグイン（https://github.com/jeresig/jquery.hotkeys ）を使用するか、さまざまなブラウザーに代替キーコードを実装することです。

押したときにデフォルトのボタンに50％の不透明度を適用します（キーダウンを示すため）。

（私にはほぼ完璧に見えます;-)デフォルトのボタンを使用してプラットフォームやブラウザ間で簡単に動作できるのと同じくらい良いでしょう。

jsfiddleデモ

とコード..。

html：

<button id="test">Test Button</button>
Selected: <span class="selected" id="out"></span>

javascript：

$('#test').click(function () {
    fn_up();
});
fn_down = function(event){
    $('#test').css("opacity", 0.5);
    $('#test').focus();
    event.preventDefault();
}
fn_up = function(event){
    $('#test').css("opacity", 1);
    $('#out').append(" test");
    event.preventDefault();
}

//to bind the event to the 'a' key
$(document).bind('keydown','a', fn_down); 
$(document).bind('keyup','a', fn_up);

//to get the same effect with the 'space' key
$(document).bind('keydown','space', fn);
$(document).bind('keyup','space', fn2);

フィドルでは、スペースボタンとマウスダウン/アップに適用して、すべてのイベントで同じ効果を実現します（ただし、「a」キーを使用するだけで使用できます...これは好みの問題です）。

于 2013-04-19T14:27:35.937 に答える
2

これは、jQueryを使用してどのように行われるかを示すjsfiddelです：http：//jsfiddle.net/KHhvm/2/

重要な部分：

$("#textInput").keydown(function(event) {
    var charCodeFor_a = 65;
    if ( event.which == charCodeFor_a ) {

        // "click" on the button
        $('#button').mousedown();
        // make the button look "clicked"
        $('#button').addClass('fakeButtonDown');

        // do some stuff here...

        // release the button later using $('#button').mousedown();
    }
});

入力フィールドに「a」を入力すると、ボタンイベントがトリガーされます。しかし、マークが指摘したように、ブラウザはそれを行わないので、クリックされたボタンのスタイルを偽造する必要があります。

編集：プロジェクトでjQueryを使用しているかどうかはわかりません。私はそれがまったく可能であることを示したかっただけです。jQueryライブラリで実行できる場合は、純粋なjavascriptで実行する方法もあります。;）

于 2013-04-19T06:59:31.230 に答える