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

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

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

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


当前回答

我只是花了些时间来弄清楚怎么做。 实际上,我发现的最简单的方法是将输入值移动到span之前的输入,保持输入1个符号宽度。虽然我不确定它是否适合你最初的需求。 也许它需要一些额外的代码,但在react+flux的应用程序中,这是非常自然的解决方案。

其他回答

这是一个不需要等宽字体的解决方案,只需要非常小的javascript代码,不需要计算计算样式,甚至支持IME,支持RTL文本。

// copy the text from input to the span $(function () { $('.input').on('input', function () { $('.text').text($('.input').val()); }); }); * { box-sizing: border-box; } .container { display: inline-block; position: relative; } .input, .text { margin: 0; padding: 2px 10px; font-size: 24px; line-height: 32px; border: 1px solid #ccc; box-radius: 3px; height: 36px; font: 20px/20px sans-serif; /* font: they should use same font; */ } .text { padding-right: 20px; display: inline-block; visibility: hidden; white-space: pre; } .input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; } <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script> <div class="container"> <span class="text"> some text </span> <input class="input" value="some text" /> </div>

利用张成的空间。文本来适应文本的宽度,并让输入有相同的大小与它的位置:绝对容器。每次变化时,将输入的值复制到span中(您可以轻松地将这段代码更改为普通JS,或者使用前端框架提供的特性)。因此,输入将适合其内容的大小。

你可以在angularjs中使用内置的ng风格指令来做得更简单。

在你的html中:

  <input ng-style="inputStyle(testdata)" ng-model="testdata" />

在你的控制器中:

 $scope.testdata = "whatever";

 $scope.inputStyle = function(str) {
    var charWidth = 7;
    return  {"width": (str.length +1) * charWidth + "px" };
    };

在你的css中:

input { font-family:monospace; font-size:12px; }

调整charWidth以匹配字体的宽度。它看起来是7,字体大小为12px;

在现代浏览器版本中,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%左右。

更新答案https://stackoverflow.com/a/41389961/1022684

如果你有多个输入并且不想重复输入文本:

  $(() => {
    $('.container input').on('input', (e) => {
      $(e.target).prev().text($(e.target).val())
    })  
    $('.container input').each((idx, elem) => {
      $(elem).prev().text($(elem).val())
    })
  })

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

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

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

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