Question

我一直在寻找这个特定问题的答案，但是很多答案都来自2012年或更早，CSS的进展可能已经解决了这个问题。

如果我的输入框只有一个字符宽（假设为8px），有没有办法让这个框扩展用户输入以随输入的大小增长？我尝试过使用contenteditable="true"，但这对输入框似乎没有任何影响。调整宽度的多次尝试没有任何效果。

不是CSS解决方案

但这是我最终用jquery做的事情

$("input").bind('keyup', function(){
        var inputLength = $(this).val().length
        if(inputLength > 0){
        $(this).attr("size", $(this).val().length)
        }
        else{
            $(this).attr("size", "1")
        }
    });

JSFiddle

Answer 1

你可以使用一些带有.headlines属性的html元素，而不是抓住contenteditable事件中的内容，检查出来：

＆＃13;

input

＆＃13;

$('[data-store]').each(function(i) {
    var thisContent = $(this);
    var remoteInput = $( thisContent.data('store') );
    thisContent.on('input', function(e) {
        remoteInput.val( $(this).text() );
        $('#current_value').text( remoteInput.val() );
    });
    
});

＆＃13;

[contenteditable] {
	padding: 0 5px;
	border: 1px solid #c0c0c0;
	display: inline-block;
	vertical-align: middle;
	min-width: 5%;
	white-space: nowrap;
	height: 30px;
	line-height: 30px;
	overflow: hidden;
}
[contenteditable]:focus,
[contenteditable]:hover {
	border: 1px solid #000;
}
[contenteditable] br {
	display: none;
}
[contenteditable] * {
	display: inline;
	white-space: nowrap;
}

＆＃13;

Answer 2

将.inputbox css更改为：

.inputbox {
    border: solid 1px black;
    background-color: green;
    display:inline-block;
    margin: 20px;
}

只要没有空格它应该展开，你给它一个最大宽度，这是问题的一部分，告诉它不要超过某一点。显示：内联块，根据最宽的内容进行扩展/收缩。

Answer 3

我不确定contenteditable属性是否适用于输入字段。具有此属性的任何其他元素都可以正常工

在我的小提琴中，我创建了一个div，内容可编辑设置为true。您可以更改样式以使其看起来像输入框。并支持输入字段的最小宽度和最大宽度

<强> HTML

<div contenteditable="true"></div>

<强> CSS

div {
  min-width: 8px;
  display: inline-block;
  border: 1px solid #DADADA;
  padding: 2px 5px;
  max-width: 200px;
}

http://jsfiddle.net/3079afmk/2/

使用CSS扩展输入的输入框

3 个答案: