html – 按住textarea焦点时按钮不单击

概述我有一个消息空间,响应字段很好,底部很小.当用户点击时,它会展开.然而,当我专注时,如果我然后单击我的按钮,它会失去焦点 – 正如预期的那样,但是按钮没有被触发,我必须再次点击它.我该如何最好地解决这个问题？ .wrap { align-items: center; display: flex; justify-content: flex-end;}textarea { he 我有一个消息空间,响应字段很好,底部很小.当用户点击时,它会展开.然而,当我专注时,如果我然后单击我的按钮,它会失去焦点 – 正如预期的那样,但是按钮没有被触发,我必须再次点击它.我该如何最好地解决这个问题？

.wrap {  align-items: center;  display: flex;  justify-content: flex-end;}textarea {  height: 40px;  wIDth: 100%;  Transition: height .2s ease;}textarea:focus {  height: 150px;}.fancy-button {  background-color: red;  cursor: pointer;  margin-left: 20px;  height: 30px;  wIDth: 30px;}

<div >   <textarea></textarea>   <div  onclick="alert('click');"></div>

解决方法 我认为问题是当你点击时,按钮在技术上不在这个地方,而只是在视觉上.如果添加一个覆盖所有空间的包装器,您可以从第一次捕获单击.

当您进行快速转换时,浏览器正在计算和更新按钮的位置;因此,您的点击位于按钮区域之外.

您可能还注意到,在此解决方案中,如果单击按钮下方,则可能由于相同原因而未触发警报.包装纸的高度迅速下降,咔哒声可能在外面.

.wrap {  display: flex;}textarea {  height: 40px;  wIDth: 100%;  Transition: height .2s ease;}textarea:focus {  height: 150px;}.wrap > div {   display: flex;   align-items:center;}.fancy-button {  background-color: red;  cursor: pointer;  margin-left: 20px;  height: 30px;  wIDth: 30px;}

<div >  <textarea></textarea>  <div onclick="alert('click');">    <div  >    </div>  </div></div>

如果您只减少转换时间,您也可以第一次捕获点击：

.wrap {  display: flex;  align-items: center;}textarea {  height: 40px;  wIDth: 100%;  Transition: height 2s ease;}textarea:focus {  height: 150px;}.fancy-button {  background-color: red;  cursor: pointer;  margin-left: 20px;  height: 30px;  wIDth: 30px;}

<div >  <textarea></textarea>  <div onclick="alert('click');" >  </div></div>

您还可以保持持续时间并添加延迟：

.wrap {  display: flex;  align-items: center;}textarea {  height: 40px;  wIDth: 100%;  Transition: height .2s ease;  Transition-delay:0.1s;}textarea:focus {  height: 150px;  Transition-delay:0s;}.fancy-button {  background-color: red;  cursor: pointer;  margin-left: 20px;  height: 30px;  wIDth: 30px;}

<div >  <textarea></textarea>  <div onclick="alert('click');" >  </div></div>

总结

以上是内存溢出为你收集整理的html – 按住textarea焦点时按钮不单击全部内容，希望文章能够帮你解决html – 按住textarea焦点时按钮不单击所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。