按键标签不工作

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

我想要做一个事件，当我按下标签，当我使用ENTER按钮“13”，它设法调用事件，当我试图使用数字“9”，我的tab键不会调用事件按键标签不工作

这是为什么？

来源

2013-06-03 user2399158

如何只使用'blur'？无论如何，TAB基本上会使场地失去焦点...... –

将keypress更改为。 keypress不会捕获选项卡和其他一些键。

Example on jsFiddle

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

来源

2013-06-03 03:23:57 BrunoLM

尝试用和e.keyCode，像这样：

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

来源

2013-06-03 03:25:04 marlenunez

按键标签不工作

回答

相关问题