How can I trim an input element's width to the size of the initial text?
-
02-01-2020 - |
문제
Can I set the initial width of an input
element to be large enough to just surround the initial text? Example of what I want to achieve: Silverlight app example.
I've tried setting the width
property but it doesn't give me what I want:
<input type="text" style ="width: auto;" value="Default value"></input>
<input type="text" style ="width: 2%;" value ="Longer default value"></input>
<input type="text" style ="width: 100%;"value="Default value"></input>
I either get excess white space or the text is truncated.
Is this possible?
I'm targeting HTML5 browsers only (IE9+, Chrome, FF), so CSS3 solutions would be fine. Javascript solutions welcomed too.
Thanks
해결책
I think the easiest solution is to use jQuery to set the widths:
$.each($('input'), function(){
$(this).css('width',(($(this).val().length) * 6 + 'px'));
});
Multiply by 6 seemed to be the best with default font. You might need to adjust it if you have used custom fonts for inputs.
다른 팁
<input type="text" placeholder="Default value" value="Default value"></input>
<input type="text" placeholder ="Longer default value" value="Longer default value"></input>
<input type="text" placeholder="Default value" value="Default value"></input>
html
<div class="resizing-input">
First: <input type="text" placeholder="placeholder" value="Default value"/>
<span style="display:none"></span>
</div><br>
<div class="resizing-input">
Second: <input type="text" value ="Longer default value"/>
<span style="display:none"></span>
</div><br>
<div class="resizing-input">
Third: <input type="text" value ="Longer default value longer still longer"/>
<span style="display:none"></span>
</div><br>
<div class="resizing-input">
First: <input type="text" placeholder="with placeholder as well"/>
<span style="display:none"></span>
</div><br>
css
.resizing-input input, .resizing-input span {
font-size: 12px;
font-family: Sans-serif;
white-space: pre;
padding: 5px;
}
js
$(document).ready(function () {
var $inputs = $('.resizing-input');
// Resize based on text if text.length > 0
// Otherwise resize based on the placeholder
function resizeForText(text) {
var $this = $(this);
if (!text.trim()) {
text = $this.attr('placeholder').trim();
}
var $span = $this.parent().find('span');
$span.text(text);
var $inputSize = $span.width();
$this.css("width", $inputSize);
}
$inputs.find('input').keypress(function (e) {
if (e.which && e.charCode) {
var c = String.fromCharCode(e.keyCode | e.charCode);
var $this = $(this);
resizeForText.call($this, $this.val() + c);
}
});
// Backspace event only fires for keyup
$inputs.find('input').keyup(function (e) {
if (e.keyCode === 8 || e.keyCode === 46) {
resizeForText.call($(this), $(this).val());
}
});
$inputs.find('input').each(function () {
var $this = $(this);
resizeForText.call($this, $this.val())
});
});
Use this
var input = document.getElementById ("myInput");
input.style.width = (input.value.length * 7) + "px";
You can change 7 to 6 0r 8 according to yout text size
and for setting it dynamically on keyPress
<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">
I came across this jsfiddle: this might help you
html:
<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' />
css:
input {
width: auto;
min-width: 0px;
max-width: 300px;
transition: width 0.25s; }
JS:
check the fiddle for the js code