使用 KeyUp，如何在回车键释放后获取值？答案

【问题标题】：Using KeyUp, how do I get a value after the enter key is released?使用 KeyUp，如何在回车键释放后获取值？
【发布时间】：2019-02-08 13:48:04
【问题描述】：

我正在尝试创建一个 keyup 事件处理程序来检查第一个文本框，以便在释放输入时计算用户输入工作的小时数。如果用户输入一个小于 40 的数字，它会接受该输入并将其乘以 12 美元，但如果用户输入一个超过 40（小时）的数字，它会花费额外的时间并将其乘以 18 美元并加上 480 美元（12 美元 x 40小时）并在第二个文本框中返回一个值。我相信我只是使用了错误的运算符或用于获取输入键的错误方法。提前致谢

let hours = document.getElementById("box1")
let pay = document.getElementById("box2")
document.addEventListener("keyup", press);

function press() {
  if (event.key === "Enter") {
    let a = hours.value;
    
    if hours.value <= 40;
      let b = (a * 12);
    else hours.value >= 40;
      let c = [((a - 40) * 18) + 480]

    let c = pay.value = b;
  }

<p>Enter your hours:</p> <input type="number" id="box1">
<p>Your pay will appear here:</p> <input type="text" id="box2" disabled>

【问题讨论】：

if (event.key === "Enter") { vs if hours.value <= 40; let b = (a * 12); 你看出问题了吗？
你的JS有几个语法问题，比如大括号不匹配和;放错了地方。我建议检查控制台
你也错过了新闻功能中的事件变量：function press(event) {...}

标签： javascript jquery html

【解决方案1】：

您的 JS 存在多个语法问题，例如大括号不匹配、分号位置错误以及未将事件作为参数接收到 press() 函数。

逻辑本身可以分为两个阶段，一个是计算基本收入，另一个是计算 40 小时水平以上的收入。另请注意，您需要警惕在该字段中输入的无效值，因为尽管它是一个数字字段，但它仍会接受一些字母字符，例如e。要解决这个问题，请确保在使用它之前 parseInt() 您收到的任何值。试试这个：

var hourBreak = 40;
var baseRate = 12;
var higherRateFactor = 1.5;

let hourField = document.getElementById("box1")
let payField = document.getElementById("box2")
document.addEventListener('keyup', press);

function press(e) {
  if (e.keyCode === 13) {
    var hours = parseInt(hourField.value, 10) || 0;      
    var baseEarnings = Math.min(hours, hourBreak) * baseRate;
    var higherEarnings = Math.max(hours - hourBreak, 0) * (baseRate * higherRateFactor)
    payField.value = baseEarnings + higherEarnings;
  }
}

<p>Enter your hours:</p> <input type="number" id="box1">
<p>Your pay will appear here:</p> <input type="text" id="box2" disabled>

【讨论】：

感谢您的回复。我对 Javascript 以及代码的格式应该如何仍然是新手。感谢您的反馈

【解决方案2】：

您在代码中使用的公式很好。但是你的代码有几个问题： if-else 语句导致 js 错误；您定义let c 两次，这也会导致错误。您还错过了新闻功能中的事件参数。在下面的 sn-p 中，如果 hours>40，我会减少您的 if-else 语句以更正 b 值。我还删除了a 变量。

let hours = document.getElementById("box1");
let pay = document.getElementById("box2");
document.addEventListener("keyup", press);

function press(event){
  
  if (event.key === "Enter") {     
    let b = (hours.value * 12);
    if (hours.value > 40) {
      b = [((hours.value-40) * 18) + 480]      
    }
    pay.value = b;
  }
}

<p>Enter your hours:</p> <input type="number" id="box1">
<p>Your pay will appear here:</p> <input type="text" id="box2" disabled>

【讨论】：