在 Vanilla JS 中 - 用户完成输入后更改变量答案

【问题标题】：In Vanilla JS - Change a variable once a user finishes typing在 Vanilla JS 中 - 用户完成输入后更改变量
【发布时间】：2015-03-23 17:09:45
【问题描述】：

不使用 jQuery - 我试图根据输入的值简单地更改 var - 当用户完成输入时，然后更新 div 值。有没有办法在不编写触发 onchange 的函数的情况下做到这一点？类似于如果发生更改则更改 var。

<div>
    <input type="text" maxlength="12" id="inNum" />
</div>
<div id="rooms"></div>

var disNum = document.getElementById('inNum').onchange;
document.getElementById('rooms').innerHTML  = disNum.value;

【问题讨论】：

你能链接到一个 js fiddle 吗？
“不写函数来触发 onchange 吗？比如如果发生变化 change var。” 所以你想在不使用 onchange 的情况下改变它？？跨度>
@GSaunders 为什么不自己制作呢？复制+粘贴6行代码，没那么难。
“有没有不使用 onchange 的方法？”：没有。 “有没有办法在没有 jQuery 的情况下做到这一点”：是的，使用 onchange。
@slebetman “有没有办法在不使用 onchange 的情况下做到这一点？”：是的；使用 setInterval 循环。

标签： javascript html

【解决方案1】：

最好的方法是听keypress、keydown 或keyup 之一。

我尝试收听onchange，但这只会在输入模糊时触发；也许这是您当前的问题，或者实际上是您想要的行为。如果这是您想要的行为，只需将下面的 .onkeyup 替换为 .onchange。

您可以做到这一点的唯一其他方法（我能想到的）是使用一些 setInterval 循环，并在每次迭代中重新检查状态，但实际上，这将是一个糟糕的主意。

Here, I've made a JSFiddle to demonstrate my approach.

var disNum = document.getElementById('inNum');

disNum.onkeyup = function(){
  document.getElementById('rooms').innerHTML = disNum.value;
};

<div>
    <input type="text" maxlength="12" id="inNum">
</div>
<div id="rooms"></div>

【讨论】：

所以唯一的办法就是拥有一个触发 onkeyup 的函数？没有办法将两者联系在一起，因此值自动拉/传递给 div？喜欢：var disNum = document.getElementById('inNum').onkeyup; document.getElementById('rooms').innerHTML = disNum.value;