JQUERY focusout fire at every time when i press keys at on screen keyboard_问答_开发者

JQUERY focusout fire at every time when i press keys at on screen keyboard

开发者 https://www.devze.com 2023-04-10 04:47 出处：网络

相关专题：jquery

<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>

At the upper code, I make on screen keyboard to display and to allow user to put key by just clicking. This keyboard will show automatically when user click at each and every text boxes.

Firstly, my requirement is I want to make my keyboard hide and re-display whenever user change focus to each text boxes. I mean user can navigate through each and every text boxes.

When I make focus to txtTest1 , it show keyboard. It is correct. But when I press any buttons at on-screen keyboard, the on-screen keyboard gone away(hide event fire).

It is the place where problem start.

So, please let me know is there any nicer way to modify my upper code.

Try this:

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