Javascript 表单变量占位符

Javascript Form Variable Place Holder

本文关键字：占位符 变量 表单 Javascript      更新时间：2023-09-26

我目前正在创建一个表单，当用户填写该表单时，会将所有表单信息放入预先设计的文档。 例如，用户将填写他们的名字、姓氏、地址等，表单下方的文档会自动填充已输入的表单信息。 所有这些都完美地运作。 但是，我希望我在文档中使用的文本框来保存变量，以删除输入变量时留下的额外空格。 有些名称可能比其他名称长，我不希望文档中有额外的空格。 有没有办法让我的文本框具有基于其中包含的变量的宽度？

好吧，没有CSS方法可以做到这一点，但是您可以使用JavaScript并做一个很好的估计。像这样的东西。

var el = document.getElementById('myInput');
el.addEventListener('keypress', function(e) {
    e.target.style.width = e.target.value.length * 10 + 'px';
});

这里的逻辑是，每当您在选择输入时按某个键时，回调将找到文本的长度并将元素大小调整为字符长度 * 10 像素宽。这不是非常精确，因为字符像素宽度会有所不同。

相关文章：