如何通过 javascript 双击增加 textarea 的大小？答案

【问题标题】：How can I increase the size of textarea via javascript doubleclick?如何通过 javascript 双击增加 textarea 的大小？
【发布时间】：2016-03-18 16:05:50
【问题描述】：

我正在尝试在我的表单中创建一个触发器，这样如果有人双击 textarea 的空白部分，它会增加高度。我正在尝试下面的代码，但它不起作用。我错过了什么？

HTML

<div id="div_details" class="fields">
<label id="label_details" for="input_details" >Details</label><br/>
<textarea id="input_details" class="" name="details" disabled="disabled" >Customer can look more.</textarea>

JavaScript

$('#input_details').dblclick(function(){
    $('#input_details').animate({height: '+=50'}, 500);
});

jsfiddle

【问题讨论】：

标签： javascript forms textarea

【解决方案1】：

问题是禁用的表单元素不会触发鼠标事件。如果将代码应用于未处于禁用状态的文本区域，您的代码将可以工作。

一种可能的解决方案是将文本区域包围在一个容器中，您可以将其设置为动画，并将文本区域设置为填充容器。

一个例子：

$('.container').dblclick(function(){
    $('.container').animate({height: '+=50'}, 500);
});

.container{
  height:100px;
}

#input_details{
  height:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_details" class="fields">
<label id="label_details" for="input_details" >Details</label><br/>
<div class="container">
  <textarea id="input_details" class="" name="details" disabled="disabled" >Customer can look more.</textarea>
</div>

【讨论】：

【解决方案2】：

在 textare 周围放置一个 div 并将事件绑定到这个 div。无法使用禁用的 textarea 执行此操作。

示例：（绑定到您的 div）

$('#div_details').dblclick(function(){
    $('#input_details').animate({height: '+=50'}, 500);
});

【讨论】：

【解决方案3】：

您已禁用 textarea，这意味着永远不会触发双击事件。

禁用的表单控件必须防止在用户交互任务源上排队的任何单击事件在元素上分派。 (https://www.w3.org/TR/html5/forms.html#attr-fe-disabled)

删除disabled 属性后，您会看到它开始工作。如果您不打算使元素具有交互性，我建议不要使用 textarea。

【讨论】：