使用javascript在输入时从输入字段中获取值答案

【问题标题】：Get value from input field while typing, using javascript使用javascript在输入时从输入字段中获取值
【发布时间】：2021-06-14 03:27:20
【问题描述】：

我正在尝试使用输入字段中的值设置 2 个变量并使用它们来计算面积。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<form>
  <label for="fname">Height:</label>
  <input type="text" id="boxHeight" name="fname"><br><br>
  <label for="lname">Width:</label>
  <input type="text" id="boxWidth" name="lname"><br><br> 
</form>
</body>
</html>

//var l = jQuery('#boxWidth').find('input');   ---> does not work
//var h = jQuery('#boxHeight').find('input');   ---> does not work
var l = document.getElementById("#boxWidth");
var h = document.getElementById("#boxHeight");

var a = parseInt(l);
$(document).on("change paste keyup", "#boxWidth, #boxHeight", () => {
                console.log("text "+a);
            });

代码可以在这里测试get input to integer

似乎没有任何效果。有什么建议吗？

【问题讨论】：

“似乎没有任何效果”非常模糊。 “为什么我总是得到“文本 NaN””将是一个更有用的问题。 getElementById 不期望 id 之前的英镑。您在 #boxWidth 内找不到输入，因为 #boxWidth 是输入。只是得到它的价值。使用更多控制台日志，或使用现代浏览器附带的逐步调试器来识别问题，例如 l 和 h 都是空的。

标签： javascript jquery input integer

【解决方案1】：

您在获得正确的输入以及从这些输入中获得价值时遇到了许多小问题。

$(document).on("change paste keyup", "#boxLatime, #boxInaltime", () => {
  var boxLatime = document.getElementById("boxLatime");
  var boxInaltime = document.getElementById("boxInaltime");
  var l = parseInt(boxLatime.value) || 0;
  var h = parseInt(boxInaltime.value) || 0;
  vr_do_l_h(l, h);
});

https://jsfiddle.net/dvtc9brq/

【讨论】：