根据内容动态调整 HTML 文本输入宽度

Posted 2023-05-09

【中文标题】根据内容动态调整 HTML 文本输入宽度

【英文标题】：Dynamically Adjust HTML Text Input Width to Content

【发布时间】：2015-08-11 19:19:44

【问题描述】：

我找不到一个明确的答案，如果我错过了一个，请原谅。

我希望我的文本输入宽度能够自动调整到其中的内容大小。首先是占位符文本，而不是某人输入的实际文本。

我创建了以下示例。目前，这些框比我的占位符文本大得多，造成了大量的空白，当我输入一些东西时，这显然是一回事。

我已经尝试过宽度自动、一些 jQuery 以及我在互联网上找到的麻线和泡泡糖。但是还没有任何效果。有什么想法吗？谢谢！

html：

<span><p>Hello, my name is </p></span>

<span><input type="text" id="input" class="form" placeholder="name"></span>

<span><p>. I am </p></span>

<span><input type="text" id="input" class="form" placeholder="age"></span>

    <span><p> years old.</p></span>

CSS：

.form 
    border: 0;
    text-align: center;
    outline: none;


span 
    display: inline-block;


p 
    font-family: arial;

Fiddle

【问题讨论】：

没有什么好的方法可以做到这一点。您必须编写一个 javascript 函数来检查输入更改时字符串的长度，然后根据 # of chars * 字符宽度调整输入的宽度。看起来代码已经在这里了：***.com/questions/3392493/…。只需调整输入===''时的逻辑，然后根据占位符制作宽度

观察：您的姓名和年龄输入不应具有相同的 id。

这里已经讨论了可能的解决方案：***.com/questions/9328682/…

@vimala 他还想要一件事，即在加载时输入将占用占位符的大小，然后它将按照您在上面讨论的问题中所说的值起作用，他只要求输入值而不是占位符

请检查这个关于输入调整大小的答案***.com/a/62881524/12164315

【参考方案1】：

一种可能的方式：

[contenteditable=true]:empty:before 
  content: attr(placeholder);
  color:gray;

/* found this online --- it prevents the user from being able to make a (visible) newline */
[contenteditable=true] br
  display:none;

<p>Hello, my name is <span id="name" contenteditable="true" placeholder="name"></span>. I am <span id="age" contenteditable="true" placeholder="age"></span> years old.</p>

CSS 来源：http://codepen.io/flesler/pen/AEIFc。

如果您需要表单的值，则必须采取一些技巧来获取值。

【讨论】：

我其实很喜欢这种方法！ +1

好吧，你总是可以给它一个与表单相关的类，然后循环遍历所有这些值，基本上是手动形式的序列化，然后你应该被设置。

有趣的解决方案。来自我的 +1。

虽然这看起来是一个不错的方法，但它允许用户在文本字段中进行标记。例如，您可以通过选择文本并按 ctrl/cmd i 来制作斜体。如果您粘贴来自其他网站的文本，它甚至会粘贴其整个标记。您可以使用 javascript ageElem.innerHTML = ageElem.textContent 解决此问题。诀窍是在适当的时候调用它。不仅在按键时，在用户粘贴文本时也是如此。

【参考方案2】：

甚至使用 onkeypress

看这个例子：http://jsfiddle.net/kevalbhatt18/yug04jau/7/

<input id="txt" placeholder="name" class="form" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></span>

对于 placeholder 加载时使用 jquery 并应用占位符 输入尺寸

$('input').css('width',((input.getAttribute('placeholder').length + 1) * 8) + 'px');

即使您可以使用 id 代替输入，这只是一个示例，以便我 使用 $(输入)

并且在 css 中提供最小宽度

.form 
    border: 1px solid black;
    text-align: center;
    outline: none;
    min-width:4px;

---

编辑：

---

如果您从输入框中删除所有文本，那么它将使用 focusout

获取占位符值

示例：http://jsfiddle.net/kevalbhatt18/yug04jau/8/

$("input").focusout(function()

    if(this.value.length>0)
        this.style.width = ((this.value.length + 1) * 8) + 'px';
    else
      this.style.width = ((this.getAttribute('placeholder').length + 1) * 8) + 'px';
    

);

【讨论】：

观察：使用此代码，一旦文本被清除，文本框宽度不会恢复正常。

@vimala 现在检查此更新的代码，如果出现任何问题，请告诉我：D

这种动态计算将高度依赖于字体大小，这并不总是有效。

【参考方案3】：

input.addEventListener('input', event => event.target.style.width = event.target.scrollWidth + 'px');

不幸的是，这只会增加输入的大小。如果删除字符，大小不会减小。对于某些用例，这完全没问题。

【讨论】：

我喜欢你的解决方案，非常干净优雅。此外，您可以像这样处理减小的宽度：input.style.width = '0'; // or any other default min-width you need 在根据 scrollWidth 更改宽度之前

【参考方案4】：

Kevin F 是对的，没有本地方法可以做到这一点。

如果您真的希望它发生，这是一种方法。

在代码中，放置文本的位置有一个不可见的 span。然后我们检索跨度的宽度。

https://jsfiddle.net/r02ma1n0/1/

var testdiv = $("#testdiv");
$("input").keydown( function()
    var ME = $(this);
    //Manual Way
    //var px = 6.5;
    //var txtlength = ME.val().length;
    //$(this).css(width: txtlength * px );

   testdiv.html( ME.val() + "--");
   var txtlength = testdiv.width();
   ME.css(width: txtlength  ); 
);

【讨论】：

值得注意的是，div 的样式必须与输入非常相似，否则效果不佳。以字体大小为例

【参考方案5】：

尝试使用 'size' 属性。 即使您清除文本，这也将起作用。 需要 jQuery 来解决这个问题

<div>
    <input id="txt" type="text" style="max-width: 100%;" placeholder="name">
</div>
<script>
    $(document).ready(function() 
        var placeholderLen = $('#txt').attr('placeholder').length;
        // keep some default lenght
        placeholderLen = Math.max(5, placeholderLen);
        $('#txt').attr('size', placeholderLen);

        $('#txt').keydown(function() 
            var size = $(this).val().length;
            $(this).attr('size', Math.max(placeholderLen, size));
        );
    );
</script>

【讨论】：

size属性本身不需要jQuery。