调整输入字段的宽度到它的输入

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

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

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

当前回答

如果你使用Bootstrap，它可以很容易地完成:

您只需要获取div的内容，并在提交表单之前将其放入隐藏输入中。

2018-07-09 12:54:42

其他回答

要计算当前输入的宽度，您必须将其嵌入到一个临时span元素中，将该元素附加到DOM，使用scrollWidth属性获得计算的宽度(以像素为单位)，然后再次删除span。当然，您必须确保在输入和span元素中使用相同的字体系列、字体大小等。因此，我给他们分配了同一个班。

I attached the function to the keyup event, as on keypress the input character is not yet added to the input value, so that will result in the wrong width. Unfortunately, I don't know how to get rid of the scrolling of the input field (when adding characters to the end of the field); it scrolls, because the character is added and shown before adjustWidthOfInput() is called. And, as said, I can't do this the other way round because then you'll have the value of the input field before the pressed character is inserted. I'll try to solve this issue later.

顺便说一句，我只是在Firefox(3.6.8)中测试了这个，但我希望你能明白。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Get/set width of &lt;input&gt;</title>
    <style>
      body {
        background: #666;
      }

      .input-element {
        border: 0;
        padding: 2px;
        background: #fff;
        font: 12pt sans-serif;
      }

      .tmp-element {
        visibility: hidden;
        white-space: pre;
      }
    </style>
  </head>
  <body>
    <input id="theInput" type="text" class="input-element" value="1">
    <script>
      var inputEl = document.getElementById("theInput");

      function getWidthOfInput() {
        var tmp = document.createElement("span");
        tmp.className = "input-element tmp-element";
        tmp.innerHTML = inputEl.value.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
        document.body.appendChild(tmp);
        var theWidth = tmp.getBoundingClientRect().width;
        document.body.removeChild(tmp);
        return theWidth;
      }

      function adjustWidthOfInput() {
        inputEl.style.width = getWidthOfInput() + "px";
      }

      adjustWidthOfInput();
      inputEl.onkeyup = adjustWidthOfInput;
    </script>
  </body>
</html>

2010-08-03 11:24:16

演进版:

<input type="text" style="width: {tag.length}ch" bind:value={tag} />

2021-05-15 17:15:15

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

2016-01-08 20:14:21

为了更好的外观和感觉

你应该使用jQuery keypress()事件结合String.fromCharCode(e.which)来获得按下的字符。因此你可以计算你的宽度。为什么?因为这样看起来会更性感:)

下面是一个jsfiddle，与使用keyup事件的解决方案相比，它产生了良好的行为:http://jsfiddle.net/G4FKW/3/

下面是一个普通的JS，它监听<input>元素的输入事件，并将span兄弟元素设置为具有相同的文本值，以便测量它。

2013-02-13 14:29:59

你可以在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;

2013-07-20 02:22:56

调整输入字段的宽度到它的输入

推荐文章

最新文章

标签