输入文本时增加输入字段的大小
[英]Increase size of input field as text is entered
问题描述
我有一个相当简单的CSS问题。 我有一个输入文本字段，在页面加载时我希望它的宽度为150px。
但是，当用户输入一些文本时，如果文本宽度大于150像素，则宽度应自动调整。
这是一个吸烟者：
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;
}
我假设最小宽度会这样做。
4 个解决方案
解决方案1
4 2015-04-22 09:23:09
目前没有办法用纯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';
"
/>
免责声明：显然，如果您正在实现许多这些输入，那么编写一个通用函数来处理它们要好得多。 另外，通过使用样式表来避免内联样式总是好得多。
/**
* 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 />
解决方案2
2 2015-04-22 07:53:53
你可以尝试这样：
function resizeInput() {
$(this).attr('size', $(this).val().length);
}
$('input[type="text"]')
.keyup(resizeInput)
.each(resizeInput);
还有一种方法可以使用
<span contenteditable="true">Some Text</span>
而不是使用Input标签。
解决方案3
1 2015-04-22 07:55:47
你可以尝试这样的事情
$('.input-class').keyup(function(){ var textlength=$('.input-class').val().length $(this).width(textlength * 8) })
.input-class{ -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; width:auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <input class="input-class" type="text" placeholder="Placeholder">
解决方案4
1 2015-04-22 08:50:28
试图使用纯JavaScript。 我将未显示的span元素（ visibility:hidden; ） visibility:hidden;到用户。 然后我计算跨度元素渲染宽度，并将其设置为输入的容器。
并将输入设置为width:100%; 使它增长到其父母的大小。
var field = document.getElementById("grow"); field.oninput = function() { var ruler = document.getElementById("ruler"); ruler.innerHTML = field.value.replace(/ /g," "); var outer = document.getElementById("outer"); if (ruler.offsetWidth > 100) { outer.setAttribute('style', "width:" + (ruler.offsetWidth + 5) + "px;"); } else { outer.setAttribute('style', ""); } };
#grow { height: 100%; width: 100%; font-size: inherit; font-family: inherit; } #outer { width: 100px; font-size: 1rem; font-family: Serif, "Times New Roman", Georgia; } .hidden { position: absolute; display: inline; visibility: hidden; padding: 0; font-size: inherit; font-family: inherit; white-space: nowrap; }
<div id="outer"> <span id="ruler" class="hidden"></span> <input id="grow" type="text/plain"/> </div> <p>+ Expands</p> <p>+ shrinks</p> <p>+ whitespace handling</p>
在输入字段中输入文本时，是否可以更改div的背景？
[英]Is there a way to change the background of a div when text is entered into an input field?
定位输入到表单输入字段中的特定文本并为其添加样式？
[英]Targeting specific text entered into form input field and add styles to it?
在输入字段中输入内容时在选择框中缩进文本
[英]Indenting Text in the select box when something is entered into the input field
如何在 React 的输入字段中输入的文本旁边添加永久标签
[英]How to add a permanent label beside entered text in an input field in React
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.