javascript - 输入宽度适合内容

Question

所以我遇到了一些问题。

我一直在努力寻找一种方法来使 input 元素的宽度适合内容。我一直在取得进步，但无论出于何种原因，该方法都不起作用。所以现在我在这里寻求帮助。我将分享我尝试过但最终对我不起作用的方法。

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

另一个注意事项:可能无法修复，如果不能修复也没关系，但是对于所有这些方法，如果您按住某个键，宽度直到最后才会更新并重复

方法一:按键事件

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>

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

方法二:keyup事件加padding

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: keydown with padding

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>

这比之前的方法稍微好一点，但同样存在问题。

此外，使用 keypress 与 keydown 的结果相同。我可以提供我尝试过的每个示例，但它们大多是上述所有内容的稍微不同的变体，所以我会让你们发挥创造力并尝试想出一个解决方案。

如果这是唯一的方式，我愿意使用 jQuery，但我更喜欢其他方式。

谢谢!

Answer 1

我会考虑另一个技巧。您可以在应用某些属性的位置使用可编辑的 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">