<input type="text" value="1" style=" font - family:宋体;/>
这是我的代码,它不工作。在HTML, JavaScript, PHP或CSS中是否有其他方法来设置最小宽度?
我想要一个具有动态变化宽度的文本输入字段,以便输入字段围绕其内容流动。每个输入都有一个2em的内置填充,这就是问题所在,第二个问题是最小宽度在输入上根本不起作用。
如果我设置的宽度超过了需要的宽度,那么整个程序就会很混乱,我需要1px的宽度,只在需要的时候才需要。
<input type="text" value="1" style=" font - family:宋体;/>
这是我的代码,它不工作。在HTML, JavaScript, PHP或CSS中是否有其他方法来设置最小宽度?
我想要一个具有动态变化宽度的文本输入字段,以便输入字段围绕其内容流动。每个输入都有一个2em的内置填充,这就是问题所在,第二个问题是最小宽度在输入上根本不起作用。
如果我设置的宽度超过了需要的宽度,那么整个程序就会很混乱,我需要1px的宽度,只在需要的时候才需要。
当前回答
在现代浏览器版本中,CSS单元ch也是可用的。根据我的理解,它是一个与字体无关的单位,其中1ch等于任何给定字体中字符0(零)的宽度。
因此,通过绑定到输入事件,像下面这样简单的东西可以用作resize函数:
var input = document.querySelector('input');//获取输入元素 输入。addEventListener(“输入”,resizeInput);//在"input"事件上绑定"resizeInput"回调 resizeInput.call(输入);//立即调用函数 函数resizeInput() { This.style.width = this.value.length + "ch"; } 输入{字体大小:1.3 em;填充:.5em;} < >标签文本 <输入> < / >标签
该示例将输入大小调整为值的长度+ 2个字符。
单位ch的一个潜在问题是,在许多字体(如Helvetica)中,字符“m”的宽度超过字符0的宽度,而字符“i”要窄得多。1ch通常比字符平均宽度宽,根据这篇文章,通常是20-30%左右。
其他回答
您希望随着文本的更改而更改size属性。
# react
const resizeInput = (e) => {
e.target.setAttribute('size', e.target.value.length || 1);
}
<input
onChange={resizeInput}
size={(propertyInput.current && propertyInput.current.value.length) || 1}
ref={propertyInput}
/>
这是我的两分钱。 创建一个空的不可见的div。用输入内容填充它,并返回输入字段的宽度。匹配每个框之间的文本样式。
$(".answers_number").keyup(function(){ $( "#number_box" ).html( $( this ).val() ); $( this ).animate({ width: $( "#number_box" ).width()+20 }, 300, function() { }); }); #number_box { position: absolute; visibility: hidden; height: auto; width: auto; white-space: nowrap; padding:0 4px; /*Your font styles to match input*/ font-family:Arial; font-size: 30px; } .answers_number { font-size: 30px; font-family:Arial; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" class="answers_number" /> <div id="number_box"> </div>
下面是一个简单的函数来获取所需的内容:
function resizeInput() {
const input = document.getElementById('myInput');
input.style.width = `${input.scrollWidth}px`;
};
下面是使用DIV和' contentteditable '属性来解决这个问题的另一种方法:
HTML:
<div contenteditable = "true" class = "fluidInput" data-placeholder = ""></div>
CSS:(给DIV一些维度,使它更容易看到)
.fluidInput {
display : inline-block;
vertical-align : top;
min-width : 1em;
height : 1.5em;
font-family : Arial, Helvetica, sans-serif;
font-size : 0.8em;
line-height : 1.5em;
padding : 0px 2px 0px 2px;
border : 1px solid #aaa;
cursor : text;
}
.fluidInput * {
display : inline;
}
.fluidInput br {
display : none;
}
.fluidInput:empty:before {
content : attr(data-placeholder);
color : #ccc;
}
注意:如果你计划在你计划提交的FORM元素中使用这个,你将需要使用Javascript / jQuery来捕获提交事件,这样你就可以解析DIV的“值”(分别是. innerhtml或.html())。
我真的很喜欢Lyth的回答,但也真的希望它是:
处理退格和删除 不需要手动添加相邻标签。 强制最小宽度。 自动应用于具有特定类的元素
我改编了他的JSFiddle,想出了这个。在这个小提琴中没有出现的一个改进是使用像jQuery CSS解析器这样的东西来实际读取输入的初始宽度。textbox-autosize规则,并使用它作为minWidth。对的,我只是在上面使用一个属性,这使得一个紧凑的演示,但不是理想的。因为每个输入都需要一个额外的属性。你可能还想在JavaScript中把minWidth设置为100。
HTML:
<div id='applicationHost'>
<div>Name: <input class='textbox-autosize' data-min-width='100' type="text" /></div>
<div>Email: <input class='textbox-autosize' data-min-width='100' type="email" /></div>
<div>Points: <input class='textbox-autosize' data-min-width='100' type="number" /></div>
</div>
CSS:
#applicationHost {
font-family: courier;
white-space: pre;
}
input.textbox-autosize, span.invisible-autosize-helper {
padding:0;
font-size:12px;
font-family:Sans-serif;
white-space:pre;
}
input.textbox-autosize {
width: 100px; /* Initial width of textboxes */
}
/*
In order for the measurements to work out, your input and the invisible
span need to have the same styling.
*/
JavaScript:
$('#applicationHost').on('keyup', '.textbox-autosize', function(e) {
// Add an arbitary buffer of 15 pixels.
var whitespaceBuffer = 15;
var je = $(this);
var minWidth = parseInt(je.attr('data-min-width'));
var newVal = je.val();
var sizingSpanClass = 'invisible-autosize-helper';
var $span = je.siblings('span.' + sizingSpanClass).first();
// If this element hasn't been created yet, we'll create it now.
if ($span.length === 0) {
$span = $('<span/>', {
'class': sizingSpanClass,
'style': 'display: none;'
});
je.parent().append($span);
}
$span = je.siblings('span').first();
$span.text(newVal) ; // the hidden span takes
// the value of the input
$inputSize = $span.width();
$inputSize += whitespaceBuffer;
if($inputSize > minWidth)
je.css("width", $inputSize) ; // apply width of the span to the input
else
je.css("width", minWidth) ; // Ensure we're at the min width
});