如何通过 javascript 双击增加文本区域的大小？

Question

我正在尝试在我的表单中创建一个触发器，如果有人双击 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

Answer 1

在文本周围放置一个 div 并将事件绑定到此 div。使用禁用的文本区域无法执行此操作。

示例：（绑定到您的div）

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

Answer 2

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

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

一个例子：

$('.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>

Answer 3

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

A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element. (https://www.w3.org/TR/html5/forms.html#attr-fe-disabled)

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

如何通过 javascript 双击增加文本区域的大小？

How can I increase the size of textarea via javascript doubleclick?

javascript

forms

textarea