iOS上的Safari中的shiftKey [英] shiftKey in Safari on iOS

问题描述

有没有办法在javascript中确定是否在移动键盘上按下shift键，并将其与大写锁定区分开（两次按下shift键）

Is there any way to determine in javascript whether shift key is pressed on mobile keyboard, and distinguish it from the caps lock(twice pressed shift key)

推荐答案

一些事实

首先，让我们看一下我认为你已经知道的关于iOS键盘的一些事实：

Some Facts

First, let's look at some facts about iOS keyboards I assume you already know:

• 当您进入键盘模式时， shift 键始终处于激活状态


• 必须手动激活大写锁定（我猜这不会太广泛使用）

• When you enter the keyboard mode, the shift key is always activated
• Caps Lock must be activated manually (I guess this is not used too widely)

我对此问题进行了一些调查，这是我发现的：

I investigated a bit into this issue, and here's what I found:

• 转移按键触发无关键事件

没有特殊的iPhone浏览器API来检测是否按下了shift键，iOS应用程序除外（duh）

There is no special iPhone Browser API to detect whether the shift key is pressed or not, except in an iOS App (duh)

keydown ， keypress ， keyup 事件触发通过iOS看起来很正常，除了它们没有表明shiftKey用法，除了它们的时间戳和类型无法区分。

The keydown, keypress, keyup event triggered by iOS look normal, except they do not indicate shiftKey usage, and apart from their timestamp and type cannot be distinguished.

你无法手动调度键盘事件iOS由于此问题， keyCode 和哪些是只读的，并始终设置为 0 。重新触发键盘事件以获得关于换档键仍然有效的一些指示是不可能的。

You cannot manually dispatch a Keyboard Event in iOS because of this issue, keyCode and which are readonly and always set to 0. Retriggering a Keyboard event to get some indication about the shift key still being on is impossible.

实际上，iPhone会对待 shift 键某些短期大写锁定键。区别在于，通常情况下，您激活一次，并自动停用。

Actually, The iPhone treats the shift key like some sort of Short Term Caps Lock key. The difference is that normally, you activate it once, and it deactivates automatically.

我假设您想在输入字段上指示用户是否应该小心按下Shift / Caps Lock（例如密码字段）。我想出的是某种解决方法，但我认为这比什么都没有好。

I assume you want to indicate on an input field whether the user should be careful about having Shift/Caps Lock pressed (a password field, for example). What I came up with is some sort of a workaround, but I think it's better than nothing.

您也可以在这里测试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

这检查用户输入的大写输入，并假设用户正在使用大写锁定如果输入两个大写字母。

This checks wheter the user did enter capitalized input, and it assumes the user is using caps lock if two capitalized letters where entered.

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);

正如我所说的，总比没有好，但如果你需要知道shift键是不是解决方案在没有用户做任何输入的情况下按下现在这似乎是不可能的。

As I said, better than nothing, but not a solution if you need to know the shift key is pressed without the user doing any input. That seems to be impossible right now.

这篇关于iOS上的Safari中的shiftKey的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！