HTML脚本捕获文本并以其自己的值执行事件

Question

我试图捕获2个text输入的值并在用户按Enter键时执行功能。

我正在使用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，否则当在输入中按回车键时，表单将自动提交。

通常，应避免尝试处理表单输入中的回车。 这破坏了表单在互联网上的预期行为，即按回车键时表单将提交。 而是在表单的Submit事件上注册一个回调，然后在其中进行验证（Ajax等）。

Answer 2

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

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

 <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); }" /> 

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

 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); } } 

 <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);"/> 

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

我通常会尝试尽可能地原生。 您可以使用的方法是使用form标签包装输入字段，然后将事件侦听器添加到Submit事件。

请尝试以下方法。

 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>