Question

目标是使用keypress事件处理程序接受表单输入，并使用该输入将当前页面替换为另一页面，并使用重定向到部分完全基于输入值的新的完全限定的URL。通过按Enter键提交输入。按键事件已正确“处理”，但重定向不执行任何操作。我意识到我可以使用 <form onsubmit=myfunction()" 但出于多种原因，更希望使用事件处理程序方法。

以下是演示该问题的示例HTML / Javascript：

var i_Parent = document.getElementById('inputs');
i_Parent.addEventListener('keypress', handleKeypress, false);

function handleKeypress(e) {
  var id = e.target.id;
  var value = e.target.value;
  var name = e.target.className;
  var node = e.target.nodeName;
  if (node == 'INPUT' && e.keyCode == 13) {
    console.log('Node=' + node + ' Id=' + id + ' Name=' + name + ' Value=' + value);
    try {
      console.log('In try{}');
      location.replace('https://google.com');
      window.location = 'https://google.com';
      console.log('No exception in try{}');
      return false;
    } catch (e) {
      console.log('In catch()');
      return false;
    }
  }
  e.stopPropagation();
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Appropriate Title Description</title>
  <style type="text/css">
    body {
      background-color: #d9d9d9;
      width: 90vw;
      margin: 0 auto;
    }
    
    input[type=number] {
      font-size: 2.8vmin;
      font-family: Arial, verdana;
      width: 3.2em;
      padding: 1px 0px;
      border: 1px solid gray;
      background-color: #5600bb;
      color: white;
    }
  </style>
</head>

<body>
  <h2>Testing Form Input</h2>
  <div id='inputs'>
    <form> Spread =
      <input id='spread' type='number' min='.10' max='2.0' step='.05' , size='4' maxlength='4' value='1.0'> %
    </form>
  </div>
</body>

</html>

Answer 1

一个有趣的泡菜！我认为问题是因为您使用的是Enter键，默认情况下，该键正在提交重新加载页面的表单。如果您使用其他密钥，那将不是问题。

我认为添加此功能可以解决此问题（我将其放在if语句之前）：

            id: getNewId(), // <--- implement this!

preventDefault doco here at Mozilla

如果您添加其他html控件，则可能会影响它们（我认为它将停止空格，从而允许您选中复选框？）。因此，也许您只想在致电location.replace

之前直接进行操作即可。

使location.replace（）与javascript keypress事件处理程序中的表单输入一起使用

1 个答案: