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

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

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

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

当前回答

要计算当前输入的宽度，您必须将其嵌入到一个临时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

其他回答

你可以这样做

// 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();
  });
});

2010-08-02 23:44:31

这是我的React解决方案，它适用于任何字体大小，只要确保你有一个monospace字体(所有字体字符宽度在monospace字体上是相同的)，就像我在我的解决方案，它将完美地工作。

JS:

const [value, setValue] = useState(0)

HTML:

<input value={value} onChange={(e) => {setValue(e.target.value)}} style={{width: `${value.toString().length}`ch}}/>

CSS:

@import url("https://fonts.googleapis.com/css2?family=B612+Mono&display=swap");    
input{
    font-family: "B612 Mono", monospace;
}

2021-08-14 00:03:11

更好的是onvalue:

<input id="txt" type="text" onvalue="this.style.width = ((this.value.length + 1) * 8) + 'px';">

它还包括粘贴、拖放等。

2017-04-11 20:03:13

您还可以使用size属性设置输入的宽度。输入的大小决定了它的字符宽度。

输入可以通过监听关键事件动态地调整它的大小。

例如

$("input[type='text']").bind('keyup', function () {
    $(this).attr("size", $(this).val().length );
});

关于这个课题JsFiddle

2014-02-13 23:31:34

只是在其他答案的基础上加上。

我注意到现在在一些浏览器的输入字段有一个scrollWidth。这意味着:

this.style.width = this.scrollWidth + 'px';

应该工作得很好。在chrome, firefox和safari测试。

对于删除支持，您可以先添加'=0'，然后再重新调整。

this.style.width = 0; this.style.width = this.scrollWidth + 'px';

2013-07-02 05:42:00

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

推荐文章

最新文章

标签