<input type="text" value="1" style=" font - family:宋体;/>

这是我的代码,它不工作。在HTML, JavaScript, PHP或CSS中是否有其他方法来设置最小宽度?

我想要一个具有动态变化宽度的文本输入字段,以便输入字段围绕其内容流动。每个输入都有一个2em的内置填充,这就是问题所在,第二个问题是最小宽度在输入上根本不起作用。

如果我设置的宽度超过了需要的宽度,那么整个程序就会很混乱,我需要1px的宽度,只在需要的时候才需要。


当前回答

你可以设置大小属性。 如果你正在使用一个响应式框架,下面的代码就足够了:

<input size="{{ yourValue.length }}" [value]="yourValue" />

但如果你使用纯js,你应该设置事件处理程序,像这样:

<input oninput="this.setAttribute('size', this.value.length)" />

其他回答

你可以这样做

// HTML
<input id="input" type="text" style="width:3px" />
// jQuery
$(function(){
  $('#input').keyup(function(){
    $('<span id="width">').append( $(this).val() ).appendTo('body');
    $(this).width( $('#width').width() + 2 );
    $('#width').remove();
  });
});

我认为你误解了最小宽度CSS属性。min-width通常用于在流体布局中定义最小DOM宽度,例如:

input {
  width: 30%;
  min-width: 200px;
}

这将把输入元素的最小宽度设置为200像素。在这里,“px”代表“像素”。

现在,如果您试图在用户提交输入字段时确保输入字段至少包含一个字符,则需要使用JavaScript和PHP进行一些表单验证。如果这确实是你想要做的,我会编辑这个答案,尽我最大的努力帮助你。

最好的解决方案是<input…= {input.value大小。长度}/ >

这是我的两分钱。 创建一个空的不可见的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>

为什么不使用css呢?

<div id="wrapper">
  <input onkeyup="keyup(event)">
  <div id="ghost"></div>
</div>

函数keyup(e) { . getelementbyid(“鬼”)。innerText = e.target.value; } #包装{ 位置:相对; min-width: 30 px; 显示:inline-block; } 输入{ 位置:绝对的; 左:0; 右:0; 边框:1px纯蓝色; 宽度:100%; } #鬼{ 颜色:透明; } < div id = "包装" > <输入onkeyup = "按键弹起(事件)" > < div id = "鬼" > < / div > < / div >

wrapper {
  position: relative;
  min-width: 30px;
  border: 1px solid red;
  display: inline-block;
}

input {
  position: absolute;
  left:0;
  right:0;
  width: 100%;
}

#ghost {
  color: transparent;
}

这段代码是由@Iain Todd介绍的,我认为我应该分享它