Keypress on tab not working

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

I want to do a event when I press tab, when I use ENTER BUTTON "13" , it manage to call the event, when I tried to use the number "9", my tab key does not call the event

Why is this so?

Change keypress to keydown. keypress will not capture tab and some other keys.

Example on jsFiddle

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

Try with keydown and e.keyCode, like so:

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

来源：https://stackoverflow.com/questions/16889576/keypress-on-tab-not-working

标签

jquery

keypress