10

ユーザーkeyCodeのkeyDown. _ _

モバイル ブラウザーの場合、仮想キーボードをトリガーする必要があるため、clickイベントでトリガーされる CSS によって非表示の入力を使用します。これはうまく機能しますが、fennec (モバイル Firefox) でキーコードをリッスンしようとすると、奇妙な動作が発生します。

を聞くために使用する関数は次のとおりkeycodeです。 

document.querySelectorAll('input')[0].addEventListener('keydown', handler);

function handler(e) {
  e.preventDefault();
  var k = (e.which) ? e.which : e.keyCode;
  document.getElementById('log').innerHTML = k;
  this.style.backgroundColor = "#FFAAFF";
}
<input type="text" />
<span id="log"></span>

  • Android 版 Firefox (v34 から v37)では、ユーザーが return を入力するまで起動しません。⏎</kbd>.
    Actually, I found that if the value of the input is not empty, it works well, at least on load. So I thought of a workaround like this one : if(this.value=='')this.value='*'; Seems to work but if you spam it, the backspace ⌫</kbd> isn't blocked, so when the input is cleared, the bug comes back : the workaround doesn't fire either.
    +This a ugly workaround, which I'm sure will create other bugs in other browsers.

       
   document.querySelectorAll('input')[0].addEventListener('keydown', handler);
   
   function handler(e) {
     if(this.value=='')this.value='*';
     e.preventDefault();
     var k = (e.which) ? e.which : e.keyCode;
     document.getElementById('log').innerHTML = k;
     this.style.backgroundColor = "#FFAAFF";
   }
   
   
       
   <input type="text" value="*"/>
   <span id="log"></span>

  • B2G (デバイス上の Firefox OS 1.3 またはエミュレートされた 2.0) では、動作はさらに奇妙です:関数はバックスペース
    のみを読み取ります。keyCode⌫</kbd>(keycode 8) or return⏎</kbd>(keyCode 13) keys. Any other key will return 0.

それで、私の質問は、すべての主要なブラウザー、デスクトップまたはモバイル、および fennecで動作する、より良いクロスブラウザーの方法を知っていますか?keyCode

Ps: バニラ js でアプリを書いたとしても、どのライブラリでも解決策を確認できます。

4

1 に答える 1

2

ブラウザと OS の間で KeyCode をリッスンする完璧なソリューションはありません。単純に、javascript は、それが実行されているオペレーティング システムによって報告される同じキー コードを使用するためです。input代わりにイベントを使用する方が良いでしょうkeyDown

このサイトによるとinput、要素のテキスト コンテンツがユーザー インターフェイスを介して変更されたときにイベントが発生します。これは、一部のモバイル ブラウザー/OS では、ユーザーが入力を入力してchangeイベントが発生するまでイベントが発生しないためです。

$(document).ready(function () {
    var inputEvent = 'oninput' in window ? 'input' : 'keyup';
    $('#listen').on(inputEvent, function (event) {
        $('#show').val($('#show').val() + '\n' + event.type);
        console.log('--- input event ----');
        for (var v in event.originalEvent) {
            if (event.hasOwnProperty(v)) {
                console.log(v + ' |---> ' + event[v]);
            }
        }
    })
    //just added to see what Silk listens for on the keyup event
    $('#listen').on('keyup', function (event) {
        $('#show').val($('#show').val() + '\n' + event.type + ' | which --> ' + event.which);
        console.log('--- keyup event ----');
        for (var v in event.originalEvent) {
            if (event.hasOwnProperty(v)) {
                console.log(v + ' |-.-> ' + event[v]);
            }
        }
    })
});
input {
    font-size: 22px
}
input, textarea {
    width:300px;
}
textarea {
    height:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
    <input type='text' id="listen" />
    <br/>
    <br/>
    <textarea type='text' id="show"></textarea>
</div>

于 2014-12-16T18:30:23.677 に答える