强制输入元素的宽度根据其内容/值的大小调整

Question

强制输入元素的宽度根据其内容/值的大小调整

6

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

我看到人们试图使用JavaScript来实现这一点(答案中的fiddle不再起作用)，所以我想知道我想要的是否可能。

这里是一个fiddle。

- Jakob Jingleheimer

很高兴看到你的尝试，这样我们就不会重复劳动了。请展示你所使用的样式。 - isherwood

@isherwood，非常抱歉。我创建了一个fiddle但是忘记在问题中链接它了。 - Jakob Jingleheimer

定义一个特定的宽度有什么问题吗？告诉它是5em宽似乎对于填充文本字段的任何给定日期都是正确的。 - cimmanon

@cimmanon，本地化 ;) - Jakob Jingleheimer

2个回答

1

我试过这个，但无法实现。你想要达到什么效果？你是否知道 contenteditable 属性？

这可能可以帮助你得到你需要的东西。

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

- Kevin Boucher

我认为我需要使用一个输入元素（与jqueryUI的日期选择器一起工作，并且使用一个div会导致日历出现在div内部）。 - Jakob Jingleheimer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- isherwood · Accepted Answer

如果您想避免样式问题，只需进行一些文本调整怎么办？使用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