所以我遇到了一些问题.
我一直试图找到一种方法来使输入元素的宽度适合内容.我一直在取得进步,但无论出于什么原因,这种方法都无效.所以现在我在这里寻求帮助.我将分享我尝试过的最终没有为我工作的方法.
注意：对于所有这些尝试,我使用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,但我更愿意.
谢谢！
这是一个简单的例子.您只需要处理初始宽度并根据需要进行设置.您还可以使用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;
}
