Javascript 自动调整文本元素大小不使用keyup

在我下面的jQuery中，我有一个元素，它反映了次要元素中写入的

输入。同时，带有反射文本的元素需要调整大小，这是可行的，但有两个问题我无法解决：


一,。当按住退格键时，它就跟不上了。

二,。当您按single backspace时，它会跳过一个字符，并且字段不能为空

请参阅下面的代码片段：


jQuery（文档）.ready（函数（）{
jQuery（函数（）{
jQuery（'#investment'）.text（jQuery（'#reflection'）.val（））；
jQuery（'#reflection'）.width（jQuery（'span'）.width（））；
}).on（'input'，function（）{
jQuery（'#investment'）.text（jQuery（'#reflection'）.val（））；
jQuery（'#reflection'）.width（jQuery（'span'）.width（））；
});
jQuery（'#虚荣url'）.bind（'keypress keyup blur'，function（）{
jQuery（'#reflection'）.val（jQuery（this.val（））；
});
});
正文{
背景色：#e4；
字体系列：Arial；
}
#虚荣url包装器{
边缘顶端：3em；
文本对齐：居中；
}
#虚荣url包装器>span{
背景色：#FBE3CF；
边界半径：8px；
填充：0.5em0；
边框：2倍纯色橙色；
}
.跨前{
背景颜色：橙色；
颜色：白色；
字体大小：粗体；
填充：0.5em；
}
#虚荣网址{
显示：块；
文本对齐：居中；
宽度：12em；
保证金：3em自动；
字体大小：1.2米；
边界半径：5px；
边框：2倍纯色橙色；
填充：0.5em；
}
#虚荣心跨度{
填充：0.5em；
}
#倒影{
显示：无；
}

https://example.com/   
/
问题在于，
.bind（'keypress keyup blur'，function（）{
与更新值不协调。当键关闭时，它需要更新并等待up，然后跳过，反之亦然

因此，这里的解决方案是使用
.on（'input'，function（）{
）

见以下结果：


jQuery（文档）.ready（函数（）{
jQuery（函数（）{
jQuery（'#investment'）.text（jQuery（'#reflection'）.val（））；
jQuery（'#reflection'）.width（jQuery（'span'）.width（））；
}).on（'input'，function（）{
jQuery（'#investment'）.text（jQuery（'#reflection'）.val（））；
jQuery（'#reflection'）.width（jQuery（'span'）.width（））；
});
jQuery（'#虚荣url'）。on（'input'，function（）{
jQuery（'#reflection'）.val（jQuery（this.val（））；
});
})；
正文{
背景色：#e4；
字体系列：Arial；
}
#虚荣url包装器{
边缘顶端：3em；
文本对齐：居中；
}
#虚荣url包装器>span{
背景色：#FBE3CF；
边界半径：8px；
填充：0.5em0；
边框：2倍纯色橙色；
}
.跨前{
背景颜色：橙色；
颜色：白色；
字体大小：粗体；
填充：0.5em；
}
#虚荣网址{
显示：块；
文本对齐：居中；
宽度：12em；
保证金：3em自动；
字体大小：1.2米；
边界半径：5px；
边框：2倍纯色橙色；
填充：0.5em；
}
#虚荣心跨度{
填充：0.5em；
}
#倒影{
显示：无；
}

https://example.com/   
/