Question

所以我遇到了一个问题。

我一直在尝试找到一种使input元素的宽度适合内容的方法。我一直在进步，但是无论出于何种原因，该方法都无法正常工作。所以现在我在这里寻求帮助。我将分享尝试的方法，这些方法最终对我没有用。

注意：对于所有这些尝试，我都使用ctx.measureText(text)，这有助于获取文本的宽度

另一个说明：：可能无法修复，如果不是可以的话，但是对于所有这些方法，如果按住某个键，宽度直到最后都不会更新然后重复

方法1：键入事件

var ctx = document.querySelector('canvas').getContext('2d');
var input = document.querySelector('input');
ctx.font = window.getComputedStyle(input).getPropertyValue('font-size')+' '+window.getComputedStyle(input).getPropertyValue('font-family');

input.addEventListener('keyup', () => {
  input.style.width = `${ctx.measureText(input.value).width+3}px`;
});

<input placeholder="Placeholder"></input>
<canvas style="display: none;"></canvas>

到目前为止，我认为这是最好的方法。但是，它工作得很好，因为它会在key up 事件上触发，因此直到键入字符后才改变宽度，这会产生抖动效果。

方法2：键盘事件和填充

var ctx = document.querySelector('canvas').getContext('2d');
var input = document.querySelector('input');
ctx.font = window.getComputedStyle(input).getPropertyValue('font-size')+' '+window.getComputedStyle(input).getPropertyValue('font-family');

input.addEventListener('keyup', () => {
  input.style.width = `${ctx.measureText(input.value+'W').width+3}px`;
});

<input placeholder="Placeholder"></input>
<canvas style="display: none;"></canvas>

此方法与上一个方法相同，但是我添加了字符'W'宽度的填充（因为它是几乎每种字体中最宽的字母）。这样可以消除抖动的影响，但是完成后，剩下的空间就不必要了。

除了在模糊事件上将其更改为适当的宽度外，我还尝试这样做，但这会导致程序中出现重大（无关）错误。

您还可以使用change事件，但是如果有人按下不输入字符的键（例如Alt），则会添加填充，因此由于没有更改，因此填充会保留（您可以禁用事件侦听器，而元素是集中的，但是效率很低而且很烦人。

仅当添加了字符时，您也可以添加到填充中，但是我想到的唯一两种方法是非常低效且令人讨厌。（或者为输入的最后长度保留一个变量，以查看其是否更改，或者使用String.fromCharCode(event.keyCode)大于0）

方法3：按下键进行填充

var ctx = document.querySelector('canvas').getContext('2d');
var input = document.querySelector('input');
ctx.font = window.getComputedStyle(input).getPropertyValue('font-size')+' '+window.getComputedStyle(input).getPropertyValue('font-family');

input.addEventListener('keydown', () => {
  input.style.width = `${ctx.measureText(input.value+'W').width+3}px`;
});

<input placeholder="Placeholder"></input>
<canvas style="display: none;"></canvas>

这比以前的方法要好一些，但是存在相同的问题。

此外，使用按键可以为您提供与按键相同的结果。我可以提供我尝试过的每个示例，但是它们与上面的所有内容几乎都略有不同，因此，我将让大家发挥创意并尝试考虑解决方案。

如果这是唯一的方法，我愿意使用jQuery，但我宁愿不这样做。

谢谢！

Answer 1

我会考虑另一个技巧。您可以在可应用div的位置上使用一些可编辑的div，以使其适合其内容（基本上使其成为内联元素），然后使用JS获得文本并将其放在输入中。

这是一个简单的例子。您只需要处理初始宽度并根据需要设置即可。您还可以轻松添加占位符，并使用JS删除它。

document.querySelector(".input").addEventListener("input", function(e) {
    document.querySelector("input").value=e.target.innerHTML;
}, false);

.input {
  border:1px solid #000;
  display:inline-flex;
  min-width:20px;
}

<div class="input" contenteditable="true">
</div>
<input type="hidden">

输入宽度适合内容

1 个答案: