在按下Shift键或/和在jQuery中启用Caps Lock时将字符转换为大写

时间:2017-06-13 19:02:35

标签: javascript jquery keyboard-events


我正在用jQuery制作一个在线键盘,我遇到了一个问题。

我的键盘只显示小写字符,目前我只能在点击字母时键入小写字符。

当用户按下真正的换档键时,我想输入大写字符。

当我启用虚拟大写锁定键时,我希望在线键盘输入大写字符。用户按下了真正的大写锁定键。

我已经尝试了一些东西,但它根本不起作用。这是我已经尝试过的。

这是我的textarea和我的字符divs的HTML代码:

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

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

这是我的字符的代码(键入字符):

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

这是我在textarea中输入字符的代码

$('.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

1 个答案:

答案 0 :(得分:0)

您可能需要跟踪所有keydown事件并锁定大写状态,如果按下任何一个班次但尚未释放,或者按下大写锁定一次,直到再次按下它。

我假设您可以将其与虚拟大写锁定/移位按钮的状态进行匹配。

因此,跟踪转变的示例可能如下所示。

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