html/jquery 保持选中对象

Question

我用了不到一天的时间制作了一个网页，该网页使用查询键盘在一些文本框中输入内容。我设法在网上找到一个键盘并将其复制过来，但它并不完全适合我的需要，所以我不得不对其进行相当多的修改以适应网页。

键盘设计用于在单个文本框（在示例中是密码框）中输入内容，而我需要它流畅地输入多个文本框。

我通过反复试验设法找到了一个可行的解决方案，但仍然存在 1 个重要错误，我似乎无法弄清楚。我是 jQuery 的新手，所以如果我不太了解很多事情，我深表歉意。

错误是当我误点击（或触摸，因为这是在触摸屏上）时，文本框变得未选中并且按键不再起作用。

原装键盘posthere.

我的代码编辑：

<script type="text/javascript">
var obj = '';

$('body').click(function(event) {
if (event.target.id != "") {
    obj = $("#" + event.target.id);
}
});


$(document).ready(function(){

var shifton = false;
var hotkeyon = false;
$('#row_hotkey').hide();


// makes the keyboard draggable 
//$("#keyboard").draggable();   



// toggles between the normal and the "SHIFT keys" on the keyboard
function onShift(e) {
    var i;
    if(e==1) {
        for(i=0;i<4;i++) {
            var rowid = "#row" + i;
            $(rowid).hide();
            $(rowid+"_shift").show();
            $('#row_hotkey').hide();
        }
    }
    else if(e==0) {
        for(i=0;i<4;i++) {
            var rowid = "#row" + i;
            $(rowid).show();
            $(rowid+"_shift").hide();
            $('#row_hotkey').hide();
        }
    }
    else if(e==3) {
        for(i=0;i<4;i++) {
            var rowid = "#row" + i;
            $(rowid).hide();
            $(rowid+"_shift").hide();
            $('#spacebar').hide();
            $('#loginform').hide();
            $('#row_hotkey').show();
        }
    }
    else if(e==4) {
        for(i=0;i<4;i++) {
            var rowid = "#row" + i;
            $(rowid).show();
            $('#spacebar').show();
            $('#row_hotkey').hide();
            $('#spacebar').show();
            $('#loginform').show();
        }
    }
}

// function thats called when any of the keys on the keyboard are pressed
$("#keyboard input").bind("click", function(e) {

    if( $(this).val() == 'Backspace' ) {
        $(obj).replaceSelection("", true);
    }

    else if( $(this).val() == "Shift" ) {
        if(shifton == false) {
            onShift(1); 
            shifton = true;
        }

        else {
            onShift(0);
            shifton = false;
        }
    }

    else if( $(this).val() == "hotkeys" ) {
        if(hotkeyon == false) {
            onShift(3); 
            hotkeyon = true;
        }

        else {
            onShift(4);
            hotkeyon = false;
        } 
    }


    else {

        $(obj).replaceSelection($(this).val(), true);

        if(shifton == true) {
            onShift(0);
            shifton = false;
        }
    }



});

});

</script>

我在键盘上添加了一个额外的按钮，可以让我在 qwerty 和热键模式之间切换。

我正在寻找一种方法来保持文本框处于选中状态 (obj)，即使我不小心点击了一个额外的 div（例如键盘 div 或背景），或者如果我没有点击任何东西全部（经常发生）

作为一个附加问题，在触摸屏上光标将被禁用，当我之前尝试时出现无法按下键盘按钮的问题，不确定这是否是代码方式的问题工作或我解决的其他一些错误，但如果有人可以让我知道这是否仍然适用于隐藏的光标和非突出显示的对象，我将不胜感激。

Answer 1

如果我对你的理解是正确的，你想一直关注输入元素。为此，您可以在 .blur() 事件上调用 .focus() 方法。看到这个 post：Maintain focus on an input tag

您将需要按照另一个 post 所说的进行操作，并且仅在短暂的计时器后获得输入焦点。

$("#noBlur").blur(function() {
  setTimeout(function() {
    $("#noBlur").focus();
  }, 500);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="noBlur" type="text">
<input type="text">

html/jquery 保持选中对象

html/jquery keep objects selected

html

keyboard

jquery