Question

<html xmlns="http://www.w3.org/1999/xhtml">
<head>      
<script type="text/javascript" src="jquery-1.6.4.js"></script>  
<script type="text/javascript" src="jquery-fieldselection.js"></script>

<script>
    $(document).ready(function(){
        var CurrentTextBoxID = "";

        // toggles the keyboard to show or hide when link is clicked
        $(":text").focus(function(e) {              
            CurrentTextBoxID = this.id;
            var top = ($(window).height() - $('#keyboard').height()) - 25;        
            var left = ($(window).width() - $('#keyboard').width()) / 2;

            //alert(CurrentTextBoxID + " focus In");        
            $('#keyboard').css(
                {               
                    "left": left+"px",
                    "top": top+"px"
                }
            ).toggle();     

        });

        $(":text").focusout(function() {
            $('#keyboard').hide();
        });

        // function thats called when any of the keys on the keyboard are pressed
        $("#keyboard input").bind("click", function(e) {                    
            $('#'+CurrentTextBoxID).replaceSelection($(this).val(), true);      
        }); 
    });
</script>

<style type="text/css">
#keyboard {
    position: fixed;
    background: #eee;
    display: none;
    border: 1px solid #ccc;
    border-radius:7px;
    width: 700px;
    height: 240px;
    padding: 5px;
    cursor: move;
    box-shadow: -5px -5px 5px 5px #888;
    -moz-border-radius: -5px -5px 5px 5px #888;
    -webkit-border-radius: -5px -5px 5px 5px #888;
}
</style>
</head>
<body>
<form id="frmOnScreenKeyboard" name="frmOnScreenKeyboard">  

<table border="0" cellpadding="0" cellspacing="0" >
<tr>
    <td>
        <input type="text" name="txtTest1" id="txtTest1"/>
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="txtTest2" id="txtTest2"/>      
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="txtTest3" id="txtTest3"/>      
    </td>
</tr>
<table>


<table height="900px">
</table>

<div id="keyboard">
    <table border=1 cellpadding=0 cellspacing=0>
        <tr>
            <td>
                <div id="row2_shift">
                    <table border=1 cellpadding=0 cellspacing=0>
                    <tr>                                
                        <td><input name="a" type="button" value="A"  /></td>
                        <td><input name="s" type="button" value="S"  /></td>
                        <td><input name="d" type="button" value="D"  /></td>
                        <td><input name="f" type="button" value="F"  /></td>
                        <td><input name="g" type="button" value="G"  /></td>
                        <td><input name="h" type="button" value="H"  /></td>
                        <td><input name="j" type="button" value="J"  /></td>
                        <td><input name="k" type="button" value="K"  /></td>
                        <td><input name="l" type="button" value="L"  /></td>
                        <td><input name=";" type="button" value=":"  /></td>
                        <td><input name="'" type="button" value='"'  /></td>                                
                    </tr>
                    </table>
                </div>
            </td>
        </tr>               
    </table>        
</div>

</form>
</body>
</html>

在上面的代码中，我在屏幕键盘上显示并允许用户只需点击即可放置键。当用户点击每个文本框时，此键盘将自动显示。

首先，我的要求是我想让我的键盘隐藏并重新显示每当用户将焦点更改为每个文本框时。我的意思是用户可以浏览每个文本框。

当我将焦点对准txtTest1时，它会显示键盘。它是正确的。但是当我按下屏幕键盘上的任何按钮时，屏幕键盘消失（隐藏事件火灾）。

这是问题开始的地方。

所以，请告诉我有没有更好的方法来修改我的上层代码。

Answer 1

试试这个：

    $(":text").focusout(function() {
        var $obj = $( document.activeElement, "#row2_shift table"  );
        if ( $obj.length == 0 ) {
            $('#keyboard').hide();
        }
    });

当我按下屏幕键盘上的按键时，每次都会发出JQUERY焦点

1 个答案: