javascript - 展开输入隐藏焦点上的相邻按钮

Question

我有一个 Bootstrap 页面，其中有两个按钮，每个按钮旁边都有一个输入。当用户聚焦输入时，我想淡出按钮并将输入扩展到全宽，同样地，当用户模糊输入时缩小按钮并淡入按钮。

正如您在下面的小(抱歉)GIF 中看到的，它在模糊时可以找到，但是当它聚焦时，输入扩展得太快，因此被推到下面的行上。

这是我的代码:

JS

$("#message").focus(function(){
    $('#disconnect').fadeOut("fast");
    $('#send_picture').fadeOut("fast");
    $(this).parent().addClass("col-md-12").removeClass("col-md-8");
    console.log("You focused the message input...");
});
$("#message").blur(function(){
    $(this).parent().addClass("col-md-8").removeClass("col-md-12");
    $('#disconnect').fadeIn("fast");
    $('#send_picture').fadeIn("fast");
    console.log("You unfocused the message input...");
});

HTML

<div class="row">
    <div class="col-md-2">
        <button type="button" id="disconnect" class="btn btn-danger btn-block">Disconnect</button>
    </div>
    <div class="col-md-2">
        <button type="button" id="send_picture" class="btn btn-primary btn-block">Send a picture</button>
    </div>
    <div class="col-md-8">
        <input class="form-control" id="message" placeholder="Enter your message and hit enter..." type="text">
    </div>
</div>

Answer 1

position absolute 按钮元素和 input inside a relative positioned container div, that will ensure that they do not got in the other way, you can also play使用 z-index 和 delays之后