Question

<!doctype html>
<head>
<meta charset="utf-8">
<title>Gazpo.com - HTML5 Inline text editing and saving </title>

<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
  <style>
    body {      
        font-family: Helvetica,Arial,sans-serif;
        color:#333333;
        font-size:13px;
    }

    h1{
        font-family: 'Droid Serif', Georgia, Times, serif;
        font-size: 28px;        
    }

    a{
        color: #0071D8;
        text-decoration:none;
    }

    a:hover{
        text-decoration:underline;
    }

    :focus {
        outline: 0;
    }

    #wrap{
        width: 500px;
        margin:0 auto;              
        overflow:auto;      
    }

    #content{
        background: #f7f7f7;
        border-radius: 10px;
    }

    #editable {     
        padding: 10px;      
    }

    #status{
        display:none; 
        margin-bottom:15px; 
        padding:5px 10px; 
        border-radius:5px;
    }

    .success{
        background: #B6D96C;
    }

    .error{
        background: #ffc5cf; 
    }

    #footer{
        margin-top:15px;
        text-align: center;
    }

    #save{  
        display: none;
        margin: 5px 10px 10px;      
        outline: none;
        cursor: pointer;    
        text-align: center;
        text-decoration: none;
        font: 12px/100% Arial, Helvetica, sans-serif;
        font-weight:700;    
        padding: 5px 10px;  
        -webkit-border-radius: 5px; 
        -moz-border-radius: 5px;
        border-radius: 5px; 
        color: #606060;
        border: solid 1px #b7b7b7;  
        background: #fff;
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
        background: -moz-linear-gradient(top,  #fff,  #ededed);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
    }   

    #save:hover
    {
        background: #ededed;
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
        background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
    }

    </style>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script>
    $(document).ready(function() {

        $("#editable").keypress(function(e){
         if(e.which == 9) 
         {      
            var content = $('#editable').html();    

            $.ajax({
                url: 'save.php',
                type: 'POST',
                data: {
                huat: content
                },              
                success:function (data) {

                    if (data == '1')
                    {
                        $("#status")
                        .addClass("success")
                        .html("Data saved successfully")
                        .fadeIn('fast')
                        .delay(3000)
                        .fadeOut('slow');   
                    }
                    else
                    {
                        $("#status")
                        .addClass("error")
                        .html("An error occured, the data could not be saved")
                        .fadeIn('fast')
                        .delay(3000)
                        .fadeOut('slow');   
                    }
                }
            });   
         }
        });

        $("#editable").click(function (e) {
            $("#save").show();
            e.stopPropagation();
        });

        $(document).click(function() {
            $("#save").hide();  
        });

    });

</script>
</head>
<body>
    <div id="wrap">
        <h1><a href="http://gazpo.com/2011/09/contenteditable/" > HTML5 Inline text editing and saving </a></h1>

        <h4>The demo to edit the data with html5 <i>contentEditable</i>, and saving the changes to database with PHP and jQuery.</h4>

        <div id="status"></div>

        <div id="content">

        <div id="editable" contentEditable="true">
        <?php
            //get data from database.
            include("db.php");
            $sql = mysql_query("select * from test where ID= '1'");
            $row = mysql_fetch_array($sql);         
            echo $row['Name'];
        ?>      
        </div>  

        <button id="save">Save</button>
        </div>


    </div>
</body>
</html>

当我按Tab键时，我想做一个事件，当我使用ENTER BUTTON“13”时，它设法调用该事件，当我尝试使用数字“9”时，我的tab键不调用事件< / p>

为什么会这样？

Answer 1

将keypress更改为keydown。 keypress不会捕获标签和其他一些密钥。

Example on jsFiddle

$(document).keydown(function(e) {
   if (e.keyCode == 9)
       alert("Tab");
});

Answer 2

尝试使用keydown和e.keyCode，如下所示：

$("#editable").keydown(function(e) {
    if(e.keyCode == 9) {
        //etc...

选项卡上的键盘不起作用

2 个答案: