Jquery plug-in achieves automatic height of multi-line text boxes [textarea]

Jquery plug-in achieves automatic height of multi-line text boxes [textarea]

This article mainly introduces the jquery plug-in to implement the automatic height of multi-line text boxes [textarea]. For more information, see

 

 

Functions:

1. When textarea is changed, the height of a row is automatically increased.
2/When textarea deletes a row, the high dependency of the row is automatically reduced: jquery. xxx. js requires similar functions, but it is inconvenient to import other files to the plug-in.

Textarea jquery plugin

 

The Code is as follows:

<Div class = "form-group">
<Label class = "col-sm-3 control-label no-padding-right" for = "form-field-5"> content </label>
<Div class = "col-sm-9">
<Textarea class = "col-sm-8" id = "form-field-5" placeholder = "Enter the content..."> </textarea>
</Div>
</Div>

 

 

The Code is as follows:

JQuery. extend ({
TextareaAutosize_dc: function (){
$ ("Textarea"). on ("keyup", function (e ){
Var currentEnterCount = $ (this). val (). split ("\ n"). length;
Var lineHeight = number(((this).css ("line-height"). replace ("px ",""));
Var enterCount = $ (this). attr ("enterCount ");
If (currentEnterCount <enterCount & enterCount! = Undefined ){
// Remove the fixed Row Height from each row
$ (This). height ($ (this). height ()-lineHeight );
} Else if (currentEnterCount> enterCount ){
// Add fixed Row Height to each row
$ (This). height ($ (this). height () + lineHeight );
$ (This). attr ("enterCount", currentEnterCount );
}
// Record the current Row Height
$ (This). attr ("enterCount", currentEnterCount );
});
}
});
// Automatic call height
$. TextareaAutosize_dc ();

 

The above is all the content of this article. I hope you will like it.