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

Question

I am trying to create a trigger in my form such that if someone double-clicks the empty part of textarea, it increases the height. I am trying the below code but it doesn't work. What am I missing?

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

The problem is that disabled form elements don't fire mouse events. Your code would work if it were applied to a text area that wasn't in a disabled state.

One possible solution is to surround the text area in a container, which you animate instead, and have the text area set to fill the container.

An example:

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

Put a div around the textare and bind the event to this div. It´s not possible to do this with a disabled textarea.

Example: (binded to your div)

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

Answer 3

You've disabled your textarea, which means the double click event is never triggered.

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 )

Once you remove the disabled attribute, you'll see it starts working. I'd suggest to not use a textarea if you're not planning to make the element interactive.