我有一个相当简单的 CSS 问题。我有一个输入文本字段，在页面加载时我希望它的宽度为 150 像素。
但是，当用户输入一些文本时，如果文本的宽度大于 150px，则宽度应该自动调整。
这是一个笨蛋:
http://plnkr.co/edit/ig0BQrJDiEtXKV8zJ2w2?p=preview
HTML:
<input class="input-class" type="text" placeholder="Placeholder">
CSS:
.input-class-2 {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color -moz-use-text-color #ef8e80;
border-image: none;
border-style: none none dashed;
border-width: 0 0 1px;
color: #ef8e80;
cursor: pointer;
font-family: Gotham-Book;
font-size: 18px;
min-width: 150px;
}
我假设 min-width 会这样做。
最佳答案
目前还没有办法用纯CSS来实现，也许曾经calc和attr可以结合使用，但目前还不行。所以我们必须回退到 JavaScript。
没有任何理由为此使用 jQuery。您可以争辩说您的“关注点应该分开”，即代码应该与标记分开，但是使用 addEventListener 很容易做到这一点。然而，如果我正在处理一小段 JavaScript，它往往会更快——在实现、页面呈现方面，甚至对于那些试图追踪导致输入行为异常的原因——使用内联事件监听器。
<input type="text"
style="min-width: 150px;"
onkeyup="this.size = Math.max(this.value.length, 1)"
/>
或:
<input type="text"
style="width: 150px;"
onkeyup="
this.style.width = '1px';
this.style.width = (
this.scrollWidth > 140
? this.scrollWidth + 10
: 150
)+'px';
"
/>
Disclaimer: Obviously if you are implementing many of these inputs it is far better to code a generalised function to handle them. Plus it is always far better to avoid inline style by using a stylesheet.
/**
* Directly setting the size attribute, with minWidth
*/
function autosize(elm, minWidth){
var keyup = function(e){
var t = e.target || e.srcElement;
var v = Math.max(t.value.length, 1);
t.setAttribute
? t.setAttribute('size', v)
: (t['size'] = v)
;
};
elm.style.minWidth = minWidth+'px';
elm.addEventListener
? elm.addEventListener('keyup', keyup)
: elm.attachEvent('onkeyup', keyup)
;
};
size 属性是迄今为止最明显的选择，尽管您可以直接设置宽度 — 如果您愿意 — 使用 scrollWidth 。
/**
* Directly setting width, with minWidth
*/
function autosize(elm, minWidth){
var keyup = function(e){
var t = e.target || e.srcElement;
t.style.width = '1px';
t.style.width = t.scrollWidth + 'px';
};
elm.style.minWidth = minWidth+'px';
elm.addEventListener
? elm.addEventListener('keyup', keyup)
: elm.attachEvent('onkeyup', keyup)
;
};
您可以通过将目标元素作为第一个参数传入来触发这些函数中的任何一个。有很多方法可以找到你的元素，最简单和最通用的是 getElementById 。虽然您只能在浏览器解析元素后才能找到您的元素，因此您使用的脚本标签(运行以下代码)必须放置在标记中的元素下方，即 <body> 的底部(最好)，或等待窗口加载或 DOM 准备就绪后。
autosize( document.getElementById('myinput'), 150 );
/**
* Directly setting width, with minWidth
*/
function autosize1(elm, minWidth){
var keyup = function(e){
var t = e.target || e.srcElement;
t.style.width = '1px';
t.style.width = t.scrollWidth + 'px';
};
elm.style.minWidth = minWidth+'px';
elm.addEventListener
? elm.addEventListener('keyup', keyup)
: elm.attachEvent('onkeyup', keyup)
;
};
/**
* Directly setting the size attribute, with minWidth
*/
function autosize2(elm, minWidth){
var keyup = function(e){
var t = e.target || e.srcElement;
var v = Math.max(t.value.length, 1);
t.setAttribute
? t.setAttribute('size', v)
: (t['size'] = v)
;
};
elm.style.minWidth = minWidth+'px';
elm.addEventListener
? elm.addEventListener('keyup', keyup)
: elm.attachEvent('onkeyup', keyup)
;
};
autosize1( document.getElementById('a'), 150 );
autosize2( document.getElementById('b'), 150 );<p>Each input is using a different implementation:</p>
<input type="text"
style="min-width: 150px;"
onkeyup="this.size = Math.max(this.value.length, 1)"
/><br />
<input type="text"
style="width: 150px;"
onkeyup="
this.style.width = '1px';
this.style.width = (
this.scrollWidth > 140
? this.scrollWidth + 10
: 150
)+'px';
"
/><br />
<input type="text" id="a" /><br />
<input type="text" id="b" /><br />关于javascript - 输入文本时增加输入字段的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29790965/