强制输入元素的宽度调整为其内容/值答案

【问题标题】：force input element's width to size to its content/value强制输入元素的宽度调整为其内容/值
【发布时间】：2013-02-15 22:11:22
【问题描述】：

我正在尝试取消输入元素的样式，使其文本看起来像纯文本/内联文本，并且我已经重置了它可以拥有的几乎所有 css 属性，但我无法调整输入的宽度/缩小到其内容（input { width:auto; min-width:0; } 不起作用）。它遵循input { width: 10px; } 之类的任意宽度，因此显然它的宽度是可调的。

我看到people trying to do it with javascript（答案中的小提琴不再起作用），所以我想知道我想要的是否可能。

这是一个fiddle。

【问题讨论】：

很高兴看到您的尝试，因此我们不会重复步骤。显示您正在使用的样式。
@isherwood，对不起。我创建了一个小提琴，但忘记在问题中链接它。
定义特定宽度有问题吗？对于填充该文本字段的任何给定日期，将其设为 5em 宽似乎都是正确的。
@cimmanon，本地化 ;)

标签： html css input autosize angular-ui

【解决方案1】：

玩过这个。做不到。你想达到什么目的？你知道contenteditable 属性吗？

这可能会得到你所需要的。

https://developer.mozilla.org/en-US/docs/HTML/Content_Editable

【讨论】：

我认为我必须使用输入元素（使用 jqueryUI 的 datepicker 并使用 div 会导致日历出现在 div 中）。

【解决方案2】：

如果您只是避免整个样式混乱并进行一些文本改组怎么办？你已经拥有了 jQuery 所需的一切。

http://jsfiddle.net/2fQgY/8/

The date is <span class="dateSpoof"></span><input class="myDate" type="hidden" value="foo" />. 
Thanks for coming.

$('.myDate').datepicker({
    showOn: 'button',
    buttonText: 'select...',
    onClose: function () {
        var dateText = $(this).val();
        $('.dateSpoof').html(dateText);
        $('.ui-datepicker-trigger').hide();
    },
    dateFormat: 'd M yy'
});

这是一个可重置的示例：http://jsfiddle.net/2fQgY/11

这是一个全是文本，只有文本：http://jsfiddle.net/2fQgY/14

【讨论】：

问题在于它应该看起来像纯文本（没有按钮或输入字段）。此外，一旦选择了数据，就无法重新选择（这在我的应用中会经常发生）。
AngularUI (github.com/angular-ui/angular-ui/tree/master/modules/directives/…) 将应用日期选择器的任何内容（输入元素除外）转换为日历容器：<span ui-date="{options}">15 Feb 2013<span> 变为日历的容器。我在最初的问题中没有提到 AngularUI，因为我的问题不是关于 datepicker/AngularUI。我看看我是否可以破解 lib 以避免这种令人讨厌的行为（但指令相当复杂）。
有点……我必须编写自己的指令才能使用您的方法。
很公平。无论如何，这是一个有趣的小项目。
isherwodd：我刚刚发现了 angular-ui 的 jq 指令 (github.com/angular-ui/angular-ui/tree/…)，所以我也许可以使用你的方法 :)