Question

我将html文本区域设置为扩展焦点，在其下方，我具有用于提交用户放入文本区域的任何按钮。扩展textarea时，单击按钮不会触发onclick事件，而只是使textarea失去焦点，从而使其再次变小。如何使onclick事件在首次点击时触发？ html看起来像这样：

.config

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

<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>

Answer 1

问题在于，当您的文本区域高度移动时，按钮也会移动。在您单击按钮最初所在的位置时，转换时间为0.2s，textarea的大小已调整，并将按钮移离了您最初单击的位置。

解决此问题的一种方法是添加一些JavaScript以检查输入是否具有值，如果具有值，则将其保持相同的高度-如果为空，则调整其大小（这完全基于文本的想法区域需要提交值）

Answer 2

这是使用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 个答案: