在取消聚焦文本区域之前单击按钮不起作用

Question

我有一个 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;
}

Answer 1

问题是，当您的文本区域高度移动时，按钮也会移动。在您单击按钮最初所在的位置时经过 0.2 秒的过渡，文本区域已调整大小并将按钮从您最初单击的位置移开。

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

Answer 2

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

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>

在取消聚焦文本区域之前单击按钮不起作用

Clicking a button doesn't work before unfocusing textarea

html

css

textarea

button