Is there a jQuery autogrow plugin for text fields?
Here's a plugin that'll do what you're after:
EDIT: I've fixed the plugin as per Mathias' comment. :)
See a demo here: http://jsfiddle.net/rRHzY
The plugin:
(function($){
$.fn.autoGrowInput = function(o) {
o = $.extend({
maxWidth: 1000,
minWidth: 0,
comfortZone: 70
}, o);
this.filter('input:text').each(function(){
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<tester/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap'
}),
check = function() {
if (val === (val = input.val())) {return;}
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
});
return this;
};
})(jQuery);
JQuery TextArea AutoGrow Plugin
Why not use it??
http://plugins.jquery.com/project/autogrowtextarea
Or another updated version of this plugin here: https://github.com/ro31337/jquery.ns-autogrow
Auto expand a textarea using jQuery
I have tried lots and Link is dead. Newer version is available here. See below for old version.
this one is great.
You can try by pressing and hold enter key in textarea. Compare the effect with the other auto expanding textarea plugin....
edit based on comment
$(function() {
$('#txtMeetingAgenda').autogrow();
});
note: you should include the needed js files...
To prevent the scrollbar in the textarea from flashing on & off during expansion/contraction, you can set the overflow
to hidden
as well:
$('#textMeetingAgenda').css('overflow', 'hidden').autogrow()
Update:
The link above is broken. But you can still get the javascript files here.
auto set size of textbox on page load to its contents
Yes, you can do it with
$("input").each(function(){
var myLength = $(this).val().length;
if(myLength == 1){
$(this).attr('size', myLength);
$(this).attr('class', 'mini');
}else{
$(this).attr('size', myLength);
}
});
and a css class:
.mini{
width:10px;
}
Example on fiddle.
Hope it helps!
jQuery - Textarea auto grow plugin cross-browser compatible
jQuery expandable -
A jQuery plugin that auto-expands textareas to fit the contents as a user types
It is another great textarea auto growing plugin written on same line of approach as @Lashae has published, but with few extra features, like animation.
jQuery - auto size text input (not textarea!)
Here's a plugin that'll do what you're after:
The plugin:
(function($){
$.fn.autoGrowInput = function(o) {
o = $.extend({
maxWidth: 1000,
minWidth: 0,
comfortZone: 70
}, o);
this.filter('input:text').each(function(){
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<tester/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap'
}),
check = function() {
if (val === (val = input.val())) {return;}
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
});
return this;
};
})(jQuery);
EDIT: Found on: Is there a jQuery autogrow plugin for text fields?
Related Topics
In R, How to Display Value on the Links/Paths of Sankey Graph
How to Implement Jquery.Noconflict()
Pdf.Js: Rendering a PDF File Using a Base64 File Source Instead of Url
JavaScript in Wkwebview - Evaluatejavascript VS Adduserscript
How Would You Overload the [] Operator in JavaScript
How to Pre-Populate a Jquery Datepicker Textbox with Today's Date
Jquery Clone() Not Cloning Event Bindings, Even with On()
Angular4 - No Value Accessor for Form Control
What Is the "Best" Way to Get and Set a Single Cookie Value Using JavaScript
Rails 5 - Turbolinks 5,Some Js Not Loaded on Page Render
How to Obtain the Query String from the Current Url with JavaScript
How to Get the Selected Radio Button Value Using Js
How Can D3.Transform Be Used in D3 V4
Angular: Can't Find Promise, Map, Set and Iterator