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

【问题标题】：JavaScript/CSS - Update value *and* size of multiple input elementsJavaScript/CSS - 更新多个输入元素的值*和*大小
【发布时间】：2016-04-19 06:21:51
【问题描述】：

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

【问题讨论】：

标签： javascript html css dynamic input

【解决方案1】：

使用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>

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

dep 是输入元素的 id query_form 是表单名称

本质上，调用函数onblur，然后获取输入的输入值。使用表单名称的setAttribute函数来更新输入字段的特定值。

【讨论】：

是否有现场演示、jsfiddle 或类似的东西？我在我的页面上使用现有输入进行了尝试，也在空白模板页面上进行了尝试，两种方式都只有一个“19506”静态输入和一个“依赖”静态输入。
寻找类似的东西：1）输入输入＃1。 2) input#2 和 input#3 的值是实时更新的（已经有这部分了）。 3) input#2 和 input#3 的大小也会实时更新以适应更新后的值（想要这个。还没有。）
嗨，刚刚创建了这个，检查一下。 link 。您几乎可以通过这种方式设置任何属性。
当数据输入到第一个字段时，如果第二个字段的大小和值将与第一个字段一起更新，则此以下链接非常接近我正在寻找的内容：(jsfiddle.net/4Qsa8 )
我发送给您的链接不正是这样做的吗？第二个字段大小（现在是值）正在根据之前的输入进行更新。
它对我不起作用，在 Firefox 40-something (win7 x64)、Pale Moon 25-ish (win7 x64) 和普通的 Android 4.1.2 浏览器中。在所有这些浏览器中，只要我离开框 1，框 2 就会调整为框 1 的大小，然后再没有任何变化。除非我手动更改它们，否则两个框的值都不会改变。 Opera Mobile 12 崩溃，但我认为这是 codepen.io 的错

【解决方案2】：

自己解决了：

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

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

【讨论】：