隱藏輸入框一旦點擊其他元素或鼠標，但保留一次焦點

Question

如何隱藏輸入框一旦mouseup或點擊其他元素並保留一次焦點？我目前的代碼如下，mouseup正在工作，但一旦重點顯示輸入框，它們會立即隱藏。看到下面的演示，然後點擊編輯按鈕。輸入框會顯示，但一旦聚焦後就會消失。

$(".edit").click(function() { 
 

 
    var $span = $(this); 
 
    $(this).closest('tr').find('.textdisplay').hide(); 
 
    $(this).closest('tr').find('.editbox').css("display", "inline"); 
 

 
    var ID = $(this).attr('id'); 
 
    var RemoveIDedit = ID.replace('edit_', ''); 
 
    $(this).hide(); 
 
    $("#save_" + RemoveIDedit).css("display", "inline"); 
 

 
}); 
 

 
$(".save").click(function() { 
 

 
    var $span = $(this); 
 
    $(this).closest('tr').find('.textdisplay').css("display", "inline"); 
 

 
    $(this).closest('tr').find('.editbox').hide(); 
 

 
    var ID = $(this).attr("id"); 
 
    var RemoveIDsave = ID.replace('save_', ''); 
 
    $(this).hide() 
 
    $("#edit_" + RemoveIDsave).css("display", "inline"); 
 

 
}); 
 

 
$(document).mouseup(function() { 
 
    $(".editbox").hide(); 
 
    $(".textdisplay").show(); 
 
    $(".edit").css("display", "inline"); 
 
    $(".save").css("display", "none") 
 
});

.save { 
 
    display: none; 
 
} 
 
table { 
 
    width: 400px; 
 
} 
 
} 
 
table td { 
 
    border: 1px solid; 
 
} 
 
.trash { 
 
    font-size: 14px; 
 
    padding-left: 5px; 
 
} 
 
.save, .edit { 
 
    padding-left: 5px; 
 
    position: absolute; 
 
    font-size: 14px; 
 
} 
 
.editbox { 
 
    font-size:14px; 
 
    display: none; 
 
} 
 
.textdisplay { 
 
    font-size: 14px; 
 
    float: left; 
 
    font-weight: normal; 
 
    word-wrap:break-word; 
 
    white-space: normal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td> <span class="textdisplay"> Data 1A </span> 
 
      <input type="text" class="editbox" value="Data 1A" /> 
 
     </td> 
 
     <td> <span class="textdisplay"> Data 1B </span> 
 
      <input type="text" class="editbox" value="Data 1B" /> 
 
     </td> 
 
     <td> 
 
      <a href="#" id="282" class="trash">Delete</a> 
 
      <a href="#" id="edit_282" class="edit">Edit</a> 
 
      <a href="#" id="save_282" class="save">Save</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <span class="textdisplay"> Data 2A </span> 
 
      <input type="text" class="editbox" value="Data 2A" /> 
 
     </td> 
 
     <td> 
 
      <span class="textdisplay"> Data 2B </span> 
 
      <input type="text" class="editbox" value="Data 2b" /> 
 
     </td> 
 
     <td> 
 
      <a href="#" id="283" class="trash">Delete</a> 
 
      <a href="#" id="edit_283" class="edit">Edit</a> 
 
      <a href="#" id="save_283" class="save">Save</a> 
 
     </td> 
 
    </tr> 
 
</table>

JS Fiddle

Answer 1

所以只要改變你的鼠標鬆開到下面的代碼：

$(document).mouseup(function(e){ 
    if ($(e.target).hasClass('editbox')) return false; 
    $(".editbox").hide(); 
    $(".textdisplay").show(); 
    $(".edit").css("display","inline"); 
    $(".save").css("display","none") 
});  

在本小提琴：

https://jsfiddle.net/L6v2880z/7/

編輯：對不起$（這）是錯誤的方面，我以前用過...