Question

我正在尝试捕获2 text个输入的值，并在用户按下回车键时执行功能。

我正在使用Internet Explorer 11。

<script type="text/javascript">
  function myFuncion(arg1, arg2) {
    window.alert("arg1:" + arg1 + ", arg2:" + arg2);
  }
</script>

现在，text输入代码

<input type="text" size="6" name="nameAnotherText" id="idAnotherText" value=""
    onkeydown = "if (event.keyCode == 13) {
      myFuncion('" + document.getElementById("idText").textContent + "', '" 
        + document.getElementById('idAnotherText').value + "');
      }"
/>


<input type="text" size="6" name="nameText" id="idText" value=""
    onkeydown = "if (event.keyCode == 13) {
      myFuncion('" + document.getElementById("idText").textContent + "', '" 
        + document.getElementById('idAnotherText').value + "');
      }"
/>

不工作。

不幸的是，这不起作用：

<button onclick="myFuncion('" +
            document.getElementById(\"idAnotherText\").textContent + "', '" +
            document.getElementById(\"idText\").textContent + "')" >Press Me</button>
<button onclick="myFuncion(" +
            document.getElementById(\"idAnotherText\").textContent + ", " +
            document.getElementById(\"idText\").textContent + ")" >Press Me</button>
<button onclick="myFuncion(" +
            document.getElementById('idAnotherText').textContent + ", " +
            document.getElementById('idText').textContent + ")" >Press Me</button>

如何解决这个问题？

或https://stackoverflow.com/a/155272/811293但不起作用：

Answer 1

如果您在带有提交按钮的表单中，则需要从事件处理程序返回false，否则当您在输入中按下返回时，表单将自动提交。

作为一般规则，您应该避免尝试在表单中的输入中处理Return press。这打破了互联网上表单的预期行为，这是他们在按下返回时提交的行为。而是在表单的submit事件上注册一个回调，然后在那里进行（验证，ajax等）。

Answer 2

从函数参数中删除引号。在这两种情况下，您还必须使用value而不是textContent来获取输入字段中的值。请尝试以下方法：

＆＃13;

function myFuncion(arg1, arg2) {
  window.alert("arg1:" + arg1 + ", arg2:" + arg2);
}

＆＃13;

<input type="text" size="6" name="nameAnotherText" id="idAnotherText" value=""
    onkeydown = "if (event.keyCode == 13) {
      myFuncion(document.getElementById('idText').value, document.getElementById('idAnotherText').value);
      }"
/>

<input type="text" size="6" name="nameText" id="idText" value=""
    onkeydown = "if (event.keyCode == 13) {
      myFuncion(document.getElementById('idText').value, document.getElementById('idAnotherText').value);
      }"
/>

＆＃13;

在HTML中编写JavaScript并不是一个好主意。您可以执行以下更清洁的操作：

＆＃13;

function myFuncion(event) {
  if (event.keyCode == 13) {
    var txt1 = document.getElementById('idText').value;
    var txt2 = document.getElementById('idAnotherText').value;
    window.alert("txt1:" + txt1 + ", txt2:" + txt2);
  }
}

＆＃13;

<input type="text" size="6" name="nameAnotherText" id="idAnotherText" value="" onkeydown = "myFuncion(event);"/>

<input type="text" size="6" name="nameText" id="idText" value="" onkeydown = "myFuncion(event);"/>

＆＃13;

Answer 3

重写javascript使其有效。通常避免将实际代码放入代码

将此作为javascript

function myOnKeyDown(event) {
  if (event.keyCode == 13) {
    var text_value = document.getElementById("idText").value
    var another_text_value = document.getElementById("idAnotherText").value
    myFunction(text_value, another_text_value);
  }
}

function myFunction(arg1, arg2) {
  window.alert("arg1:" + arg1 + ", arg2:" + arg2);
}

您可以在html

中使用此功能

<input type="text" size="6" name="nameAnotherText" id="idAnotherText" value="" onkeydown="myOnKeyDown(event)"/>
<input type="text" size="6" name="nameText" id="idText" value="" onkeydown="myOnKeyDown(event)"/>

这应该允许您的代码运行。

Answer 4

我通常会尝试尽可能的原生。您可以采用的方式是使用表单标记包装输入字段，并将事件侦听器添加到提交事件。

请尝试以下操作。

const form = document.getElementById('myform');

form.addEventListener('submit', onSubmit, false);
form.submit = onSubmit;

function onSubmit(event) {
  if (event) {
    event.preventDefault();
  }
  console.log('submitted');
  const input1 = document.getElementById('input1').value;
  const input2 = document.getElementById('input2').value;
  console.log({
    input1,
    input2
  });
}

<form id="myform">
  <input type="text" id="input1">
  <input type="text" id="input2">
  <button type="submit" style="display: none"></button>
</form>

HTML脚本捕获文本并使用自己的值执行事件

4 个答案: