javascript - 单击其他元素或 mouseup 后隐藏输入框，但保留一次焦点

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

所以只需将您的 mouseup 更改为以下代码:

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

在这个 fiddle 中:

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

编辑:抱歉 $(this) 是我之前使用的错误上下文...