9

モバイル キーボードでシフト キーが押されているかどうかを JavaScript で判断し、Caps Lock (シフト キーを 2 回押す) と区別する方法はありますか

4

2 に答える 2

6

いくつかの事実

まず、iOS キーボードに関するいくつかの事実を見てみましょう。すでにご存知だと思います。

  • キーボードモードに入ると、shiftキーは常にアクティブになります
  • Caps Lock手動でアクティブ化する必要があります（これはあまり広く使用されていないと思います）

iPhone シフトキーの扱い

この問題について少し調べてみたところ、次のことがわかりました。

  • キーはshiftキーイベントをトリガーしません

  • iOSアプリを除いて、シフトキーが押されたかどうかを検出する特別なiPhoneブラウザAPIはありません（当然）

  • iOS によってトリガーされたkeydown, keypress,keyupイベントは通常のように見えますが、shiftKey の使用を示しておらず、タイムスタンプとタイプを除いて区別できません。

  • この問題のため、iOS でキーボード イベントを手動でディスパッチすることはできずkeyCode、which読み取り専用で常に に設定され0ます。キーボード イベントを再トリガーして、シフト キーがまだオンになっていることを示すことはできません。

  • 実際、iPhone はshiftキーをある種のキーのように扱いShort Term Caps Lockます。違いは、通常、一度アクティブ化すると、自動的に非アクティブ化されることです。

できること

ユーザーが Shift/Caps Lock を押すことに注意する必要があるかどうかを入力フィールドで示したいと思います (たとえば、パスワード フィールド)。私が思いついたのはある種の回避策ですが、何もないよりはましだと思います。

ここで jsfiddle をテストすることもできます。

DOM セットアップ

<div id="wrapper">
  <label for="test">ENTER SOMETHING HERE</label>
  <input type="text" name="test" id="test"/>
</div>
<div id="warning"></div>​

Javascript

caps lockこれは、ユーザーが大文字で入力したかどうかをチェックし、2 つの大文字の文字が入力された場合にユーザーが使用していると想定します。

var isCaps = false,
isUppercase = false,
str = '',
test = document.getElementById('test'),
warning = document.getElementById('warning');

function capsDetection(e) {

    // Since where on iOS, we at least don't have to care 
    // about cross-browser stuff
    var s = String.fromCharCode(e.which);
    isCaps = isUppercase;

    // if the char doesn't match its lower case friend, and the shift key is 
    // not pressed (which is always the case on iOS, but we leave it there 
    // for readability), we have uppercase input
    isUppercase = (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey);

    // if its the second uppercase input in a row, we may have caps lock input
    isCaps = isCaps && isUppercase;

    // set the warning
    if (isUppercase && !isCaps) {
        str = 'You where using the shift key';
    }
    else if (isCaps) {
        str = 'Caps lock seems to be activated';
    } else {
        str = '';
    }
    warning.innerHTML = str;
}

// the right event properties are only available on keypress
test.addEventListener('keypress', capsDetection);

私が言ったように、何もしないよりはましですが、ユーザーが何も入力せずにシフトキーが押されたことを知る必要がある場合の解決策ではありません。それは今のところ無理そうです。

于 2012-07-13T15:24:40.283 に答える
0

これはJavascriptでは不可能だと思います。ただし、Objective Cでは可能です。

http://developer.apple.com/library/safari/#documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html

于 2012-07-16T11:35:13.407 に答える