Shiftキーを押しながら文字を大文字に変換するか、jQueryでCaps Lockを有効にする

Question

jQueryを使用してオンラインキーボードを作成していますが、問題が発生しました。

私のキーボードは小文字だけを表示し、その間は小文字を入力することができます。

ユーザーが実際のシフトキーを押すと、大文字を入力したいと思います。

また、仮想キャップロックキーが有効になっているか、ユーザーが実際のキャップロックキーを押したときに、オンラインキーボードで大文字を入力したいと思います。

私はすでに何か試しましたが、全く動作しません。ここに私がすでに試みたことがあります。

これは私のテキストエリアと私の文字のdivと私のHTMLコードです：

<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

シフトが押されていてもまだリリースされていない場合や、もう一度押されるまでキャップロックが1回押された場合には、キャップの状態をロックする必要があります。

あなたはこれを仮想capslock/shiftボタンの状態と一致させることができます。

したがって、トラッキングシフトの例は、このように見えます。

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