javascript – 输入宽度适合内容

所以我遇到了一些问题.

我一直试图找到一种方法来使输入元素的宽度适合内容.我一直在取得进步,但无论出于什么原因,这种方法都无效.所以现在我在这里寻求帮助.我将分享我尝试过的最终没有为我工作的方法.

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

另一个注意事项：可能无法修复,如果不是这样,但对于所有这些方法,如果按住某个键并且重复,则宽度不会更新到最后

方法1：keyup事件

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`;
});


到目前为止,这是我认为最好的方法.它工作得很好,但是,因为它在keyup事件上触发,所以在键入字符之前它不会改变宽度,这会产生抖动效果.
方法2：keyup事件加填充
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`;
});

这个方法与前一个方法相同,但是我添加了字符“W”宽度的填充(因为它几乎是每种字体中最宽的字母).这样可以消除抖动效果,但是当你完成后会留下不必要的空间.
除了在blur事件上将其更改为正确的宽度之外,我尝试这样做,但这导致了我的程序中的一个主要(无关)错误.
你也可以使用change事件,但是如果某人按下了一个没有输入字符的键,比如Alt,它会添加填充,然后由于没有更改,填充保留(你可以禁用事件监听器)虽然元素是聚焦的,但这是非常低效和烦人的).
你也可以只在添加了一个角色时才添加到填充,但是我能想到的另外两种方法再次非常低效和烦人. (保持输入的最后一个长度的变量并查看它是否更改,或使用String.fromCharCode(event.keyCode)大于0)
方法3：使用填充进行keydown
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`;
});

这比以前的方法略好,但同样的问题也适用.
此外,使用keypress可以获得与keydown相同的结果.我可以提供我尝试过的每个例子,但是上面所有内容的变化都略有不同,所以我会让你们有创意并试着想出一个解决方案.
如果这是唯一的方法,我愿意使用jQuery,但我更愿意.
谢谢！


最佳答案
我会考虑另一个技巧.您可以在应用某些属性的位置使用可编辑的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;
}

javascript – 输入宽度适合内容

相关文章