JavaScript/CSS-更新多个输入元素的值*和*大小

JavaScript/CSS - Update value *and* size of multiple input elements

本文关键字：大小 元素 输入 CSS- 更新 JavaScript      更新时间：2023-09-26

我有一个包含html、javascript和css（无外部jquery）的数字基转换页面，我在其中键入一个输入字段，然后它实时更新多个其他输入字段，每个输入字段在不同的基中使用相应的值。这些多个值，大约有5打，都是不同的长度，所以我手动设置了它们的每个输入长度，大小为size="43"、size="50"等。是否也可以实时更新每个输入字段的大小，以匹配其动态更新的内容，使用javascript和css，但不使用jquery？如果有帮助的话，每个div也在自己的div中，如果需要的话，也可以在自己的span中。我已经尝试了至少六个我在网上找到的建议，但到目前为止没有一个有效，因为它们都取决于1）"onkey"或"blur"事件，除了我键入的1个输入字段之外，没有其他事件，所以这对其他几十个字段中的任何一个都不起作用，或者2）用特定的名称更新一个特定的输入字段，这也不适用，因为我有几十个，每个具有不同的输入id。一个简短而优雅的解决方案会更可取，但我愿意尝试任何东西。谢谢

使用setAttribute命令更改元素的值。请参阅下面的示例。

HTML

<td><input type=text name=script_id id="id" onblur="myFunctionY(this)" placeholder="19506"></td>
<td><input type=text name=dep id="dep" placeholder="dependency"></td>

JS

<script type=text/javascript>
function myFunctionY(vari) {
console.log(vari.value);
document.query_form.dep.setAttribute("value",vari.value);
   }
</script>

dep是输入元素的idquery_form是表单名称

本质上，调用一个函数onblur，然后该函数将获得输入的输入值。使用表单名称的setAttribute函数可以更新输入字段的特定值。

自己用解决了这个问题

document.getElementById("foo").style.width = ((document.getElementById("foo").value.length + 1) * 6.5);

就与输入元素内容匹配的样式宽度而言，它非常接近，不是100%，但至少它是动态的，这正是我想要的。

相关文章：