强制输入元素的宽度大小为其内容/值

时间:2013-02-15 22:11:23

标签: html css input autosize angular-ui

我正在尝试取消对输入元素的设计,使其文本看起来像普通/内联文本,并且我已经重置了它可以拥有的每个css属性,但我无法获得输入的宽度来调整/缩小到其内容(input { width:auto; min-width:0; }不起作用)。它遵循像input { width: 10px; }这样的任意宽度,所以很明显它的宽度是可调的。

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

这是 fiddle

2 个答案:

答案 0 :(得分:1)

玩这个。做不到。你想要实现什么目标?您是否了解contenteditable属性?

这可能会为您提供所需的信息。

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

答案 1 :(得分:1)

如果你只是避免整个风格的做法并做一些文字洗牌怎么办?你已经掌握了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