vue开发中使用span替代input输入，兼容IE

Posted 2023-03-24

参考技术A 也就是说当元素设置 contenteditable 为true 那么当前元素可编辑

注意：此时该元素获取焦点时，该元素就可以进行编辑，和输入框一样的效果，但是它的值不是value而是innerText/innerhtml

在canvas上绘制文字时，我们需要实时绘制当前输入内容，刚开始使用场景是利用动态创建input元素，input获取焦点输入文字，当input失去焦点时绘制当前input的内容，功能可以实现，唯一不足就是我们需要输入框的大小按照输入内容的长度改变，使用input明显不太方便，可以使用动态改变size属性，如果输入的字母，数字，符合可以实现，当时如输入汉字的就会有问题，我们知道span等行内元素可以根据文字长度改变元素大小，所以，我们使用动态创建span标签，设置contenteditable="true",然后设置相应的样式，就可以模仿input输入框的效果