在按下Shift鍵的同時將字符轉換爲大寫或者jQuery中啓用了Caps Lock

Question

我正在製作一個帶有jQuery的在線鍵盤，並且遇到了問題。

我的鍵盤只顯示小寫字符，目前我只能在點擊字母時鍵入小寫字母。

我想在用戶按下真正的shift鍵時輸入大寫字母。

此外，當虛擬大寫鎖定鍵啓用或用戶按下真正大寫鎖定鍵時，我希望在線鍵盤可以鍵入大寫字符。

我已經嘗試了一些東西，但它根本不起作用。這是我已經嘗試過的。

這是我的HTML代碼與我的文本區域和我的字符的div：

<textarea id="targetText"></textarea><br />

<div class="key by_a"></div> <div class="key by_z"></div>

這是我的字符代碼（鍵入字符）：

$('.by_a').val('й'); 
$('.by_z').val('ц'); 

這裏是我的代碼，鍵入我的文本中的字符ea

$('.key').click(function(e){ 
var tav = $('#targetText').val(), 
    strPos = $('#targetText')[0].selectionStart; 
    front = (tav).substring(0,strPos), 
    back = (tav).substring(strPos,tav.length); 
$('#targetText').keyup(function(e) { 
     if (e.keyCode === 16) { 
     $('#targetText').val($(this).val().toUpperCase()); 
} 
}); 
$('#targetText').val(front + $(this).val() + back); 
}); 

在此先感謝您的幫助。我儘量做到儘可能精確。這裏是我的JSFiddle

Answer 1

你可能會需要跟蹤所有​​事件，如果按下任意移動和尚未發佈，或者直到它再次按下了Caps Lock按一次鎖定帽狀態。

我假設你可以將它與虛擬大寫鎖定/轉換按鈕的狀態進行匹配。

所以跟蹤轉換的例子可能看起來像這樣。

var shiftPressed = false; 
$(document).on('keydown', function(e) { 
    if (e.keyCode === 16) shiftPressed = true; 
}); 
$(document).on('keyup', function(e) { 
    if (e.keyCode === 16) shiftPressed = false; 
});