Is there anyway to set the width of an input text type to be the width of the value inside?
CSS
input[type=text] {
width:auto;
}
JS:
$('input[type=text]').css('width', $(this).val());
-
Are you wanting the input box to expand if the characters inside end up taking up more space than the input?Nicholas Hazel– Nicholas Hazel2014-01-24 22:56:48 +00:00Commented Jan 24, 2014 at 22:56
-
No the size of each input should be the elements value.Michael Schwartz– Michael Schwartz2014-01-24 22:57:43 +00:00Commented Jan 24, 2014 at 22:57
-
Yes, but do you want the size to change when you type in the input, thus changing the value ?adeneo– adeneo2014-01-24 22:58:24 +00:00Commented Jan 24, 2014 at 22:58
-
Oh, I'm with you. One second.Nicholas Hazel– Nicholas Hazel2014-01-24 22:58:36 +00:00Commented Jan 24, 2014 at 22:58
-
Yes (I have to wait 9 minutes before I can accept the answer)Michael Schwartz– Michael Schwartz2014-01-24 22:58:53 +00:00Commented Jan 24, 2014 at 22:58
|
Show 2 more comments
2 Answers
You could use the size trick
$('input[type=text]').attr('size', function() {
return this.value.length;
});
For completeness, to make it "auto expand", you'd need an event handler as well
$('input[type=text]').on('keyup', function() {
$(this).attr('size', this.value.length);
}).trigger('keyup');
4 Comments
Nicholas Hazel
Darnit, beat me to it :-P I was typing up the same fiddle hahaha. Upvoted.
dandavis
don't forget to recommend a monospace font or else "..." will look funny.
Michael Schwartz
I was trying css I didn't think about the size handler. Thanks!
Nicholas Hazel
sigh, yet again beat me to it haha. Well done @adeneo.
You can hack a span with the contenteditable attribute then style it to look like an input:
<span class="input" contenteditable id="input1">ddd</span>
<style>
span.input {
border: thin black solid;
padding: 2px 6px;
background-color: #EEE;
}
</style>
Given jQuery, it's easy to get that text with something like $('#input1').text();
Here's a fiddle: http://jsfiddle.net/JoeAndrieu/qYpAK/1/
