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

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>

如何解决？

或某些东西但不起作用：

Answer 1

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

作为一般规则，您应该避免尝试处理 Return 表单输入中的按键。这打破了 Internet 上表单的预期行为，即它们在按下 return 时提交。而是在表单的提交事件上注册回调并在那里执行（验证、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

我通常会尽可能地使用本地语言。您可以采用的方法是用表单标签包装输入字段，并将事件侦听器添加到提交事件中。

试试下面的方法。

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 脚本捕获文本并使用自己的值执行事件

HTML Script capturing text and performing events with its own value

html

javascript

events

textbox

internet-explorer-11