在取消聚焦 textarea 之前单击按钮不起作用答案

【问题标题】：Clicking a button doesn't work before unfocusing textarea在取消聚焦 textarea 之前单击按钮不起作用
【发布时间】：2018-08-08 13:35:23
【问题描述】：

我有一个 html textarea 设置来扩展焦点，在它的正下方我有一个按钮，用于提交用户放入 textarea 的任何内容。当 textarea 展开时，单击按钮不会触发 onclick 事件，而是只会使 textarea 失去焦点，导致它再次变小。如何在第一次点击时触发 onclick 事件？ html 看起来像这样：

<div id="commentSection">
<div id="commentsContainer">
</div>
<div id="inputContainer">
    <textarea placeholder="add a comment" id="txtTitle"></textarea>
</div>
<div>   
    <button onclick="return addListItem()">Post</button>
</div>

按钮没有附加任何样式，但文本区域有以下内容：

#txtTitle {
width: 878px;
margin-bottom: 5px;
height: 30px;
transition: height 0.2s;
}

#txtTitle:focus {
height: 100px;
}

【问题讨论】：

标签： html css button textarea

【解决方案1】：

这是一个使用required 属性来确定输入何时具有某些值的技巧。

function addListItem(){
  console.log('inside addListItem');
}

#txtTitle {
    width: 878px;
    margin-bottom: 5px;
    height: 30px;
    transition: height 0.2s;
}

#txtTitle:valid {  
    height: 100px;
}
#txtTitle:focus {  
    height: 100px;
}

<div id="commentSection">
<div id="commentsContainer">
</div>
<div id="inputContainer">
    <textarea placeholder="add a comment" id="txtTitle" required></textarea>
</div>
<div>   
    <button onclick="return addListItem()">Post</button>
</div>

【讨论】：

不知道那个伪类，但这正是我想要的。谢谢。
当然。很高兴为您提供帮助。

【解决方案2】：

问题在于，当您的 textarea 高度移动时，按钮也会移动。到您单击按钮最初所在的位置时，过渡时间为 0.2 秒，textarea 已调整大小并将按钮从您最初单击的位置移开。

解决这个问题的一种方法是添加一些 javascript 来检查输入是否有值，如果有值则保持相同的高度 - 如果它是空的，则调整它的大小（这纯粹是基于文本的想法area 需要提交一个值）

【讨论】：

感谢您的建议。我想这会起作用，但我接受了 Kaushiks 的建议以避免添加更多的 js。