others - 在HTML中,javascript隐藏按钮

我写了一个简单的输入字段,里面有一个按钮。 代码如下所示。


form {


 width: 50%;


}



/* Style the search field */



.add-on {


 position: relative;


}



.add-on input {


 width: 100%;


 border-radius: 0;


}



.add-on button {


 position: absolute;


 border-radius: 0;


 top: 2px;


 right: 3px;


 height: 33px;


 width: 60px;


 z-index: 2;


 font-size: 14px;


 padding: 5px;


}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">


 <div class="input-group add-on">


 <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">


 <button class="btn btn-primary" type="submit">Search</button>


 </div>


</form>

可以看到,当我在输入字段中单击时,按钮消失。 当我在该表单外单击时,它重新出现。 但我不希望它在点击输入字段时消失。 我要怎么才能做到?

时间:

在焦点时使用 z-index


 input:focus ~. btn-primary {


 z-index: 100;


 }




form {


 width: 50%;


}



/* Style the search field */



.add-on {


 position: relative;


}



.add-on input {


 width: 100%;


 border-radius: 0;


}



.add-on button {


 position: absolute;


 border-radius: 0;


 top: 2px;


 right: 3px;


 height: 33px;


 width: 60px;


 z-index: 2;


 font-size: 14px;


 padding: 5px;


}



 input:focus ~. btn-primary {


 z-index: 100;


 }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">


 <div class="input-group add-on">


 <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">


 <button class="btn btn-primary" type="submit">Search</button>


 </div>


</form>

.add-on button CSS规则中的z-index 更改为 3


.add-on button {


 position: absolute;


 border-radius: 0;


 top: 2px;


 right: 3px;


 height: 33px;


 width: 60px;


 z-index: 3;


 font-size: 14px;


 padding: 5px;


}



只需要给按钮的z-index 一个更高的值。 可能是输入高亮显示div


form {


 width: 50%;


}



/* Style the search field */



.add-on {


 position: relative;


}



.add-on input {


 width: 100%;


 border-radius: 0;


}



.add-on button {


 position: absolute;


 border-radius: 0;


 top: 2px;


 right: 3px;


 height: 33px;


 width: 60px;


 z-index: 5;


 font-size: 14px;


 padding: 5px;


}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">


 <div class="input-group add-on">


 <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">


 <button class="btn btn-primary" type="submit">Search</button>


 </div>


</form>

你应该将 position: relative 设置为按钮


form {


 width: 50%;


}



/* Style the search field */



.add-on {


 position: relative;


}



.add-on input {


 width: 100%;


 border-radius: 0;


}



.add-on button {


 position: relative;


 border-radius: 0;


 top: 2px;


 right: 3px;


 height: 33px;


 width: 60px;


 z-index: 2;


 font-size: 14px;


 padding: 5px;


}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">


<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">


 <div class="input-group add-on">


 <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">


 <button class="btn btn-primary" type="submit">Search</button>


 </div>


</form>

就像别人所说,输入字段在聚焦时覆盖按钮。 尝试在输入和按钮上设置永久 z-index,并使按钮的z-index 比输入的高


form {


 width: 50%;


 }



/* Style the search field */



. add-on {


 position: relative;


 }



. add-on input {


 width: 100%;


 border-radius: 0;


 z-index: 1020;


 }



. add-on button {


 position: absolute;


 border-radius: 0;


 top: 2px;


 right: 3px;


 height: 33px;


 width: 60px;


 z-index: 2;


 font-size: 14px;


 padding: 5px;


 z-index: 1021;


 }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">


 <div class="input-group add-on">


 <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">


 <button class="btn btn-primary" type="submit">Search</button>


 </div>


</form>

只需将 z-index 添加到输入。 值大于 -1和 LESS,而不是按钮 z-index


/* Style the search field */



.add-on input {


 width: 100%;


 border-radius: 0;


 z-index: 0


}



.add-on button {


 position: absolute;


 border-radius: 0;


 top: 2px;


 right: 3px;


 height: 33px;


 width: 60px;


 z-index: 2;


 font-size: 14px;


 padding: 5px;


}



...