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

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

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

一个例子：

＆＃13;

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

＆＃13;

.container{
  height:100px;
}

#input_details{
  height:100%;
}

＆＃13;

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

＆＃13;

Answer 2

在textare周围放一个div并将事件绑定到这个div。使用禁用的textarea无法做到这一点。

示例:(绑定到您的div）

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

Answer 3

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

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

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

如何通过javascript doubleclick增加textarea的大小？

3 个答案: