Question

我可以将input元素的初始宽度设置为足以包围初始文本吗？我想要实现的例子：Silverlight app example。

我已尝试设置width属性，但它没有给我我想要的内容：

<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>

我要么得到多余的空格，要么文本被截断。

这可能吗？

我只针对HTML5浏览器（IE9 +，Chrome，FF），因此CSS3解决方案会很好。 Javascript解决方案也很受欢迎。

由于

Answer 1

我认为最简单的解决方案是使用jQuery设置宽度：

$.each($('input'), function(){
    $(this).css('width',(($(this).val().length) * 6 + 'px'));
});

乘以6似乎是最好的默认字体。如果您使用自定义字体输入，则可能需要调整它。

演示：http://jsfiddle.net/2479t/

Answer 2

<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>

Answer 3

<强> Demo

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())
    });
});

来源：Adjust width of input field to its input

Answer 4

使用此

var input = document.getElementById ("myInput");           
input.style.width = (input.value.length * 7) + "px";

您可以根据文字大小更改7到6 0r 8

并在keyPress上动态设置

<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

SEE DEMO HERE

Answer 5

我遇到了这个jsfiddle：这可能对您有帮助

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

如何将输入元素的宽度修剪为初始文本的大小？

5 个答案: