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

Question

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

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

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

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

一个例子:

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