Question

我花了不到一天的时间来整理一个使用querty键盘键入一些文本框的网页。我设法在网上找到一个键盘并将其复制过来，但它并不完全适合我需要的东西，所以我不得不修改它以适应网页。

键盘被设计为键入单个文本框（在示例中它是一个密码框），因为我需要它来流畅地键入多个文本框。

我设法通过反复试验得到了一个可以通过的解决方案但是仍然存在一个重要的错误，我似乎无法弄明白。我是jQuery的新手，所以如果我不太了解很多东西，我会道歉。

错误是当我误点击（或触摸屏上的触摸）时，文本框变得未选中，键不再起作用。

原始键盘贴here。

我的代码编辑：

<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或背景）或者我根本没有击中任何东西（发生了很多）

作为一个额外的问题，在触摸屏上光标将被禁用，当我之前尝试过时出现了无法按下键盘按钮的问题，不确定这是代码工作方式的问题还是还有一些我经历过的其他错误，但如果有人能告诉我这是否仍然可以使用隐藏游标和不可突出的对象id欣赏它。

Answer 1

如果我理解正确，您希望将注意力集中在输入元素上。为此，您可以在.focus()事件上调用.blur()方法。请参阅此帖子：Maintain focus on an input tag

你需要按照其他帖子的说法进行操作，并且只有在短暂的计时器之后才能进行输入焦点。

＆＃13;

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

＆＃13;

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

＆＃13;

html / jquery保持选中对象

1 个答案: