Question

您好我有以下代码

 <div id="js_example"> 
                    <p id=js_intro_text> Introduce yourself! </p>
                    <form id="js_form">
                        Please enter your name: <input  id = "name_form" type="text" name="full_name"><br>
                    <input type="button" onclick=greet() value="submit">
                    </form>
                    <p id="js_intro_answer"></p>
    </div>

这是一个非常简单的表单，它有一个按钮，用于读取表单文本框的值，并根据用户输入的名称对用户进行问候。但是，激活该功能的唯一方法是按提交按钮。有没有办法在用户选择所述文本框时按Enter键激活文本框中的greet（）函数？

由于

Answer 1

表单通常用于将数据发布回服务器，但看起来，从按钮的“onclick”属性（这可以防止表单重新加载页面），您只在客户端查看。

你可以使用表单，但更直接的方法是删除表单并让你的文本框听取回车键。

这两种方法的简单例子都在这个答案中（重复的问题，真的）

https://stackoverflow.com/a/13987669/7353829

Answer 2

使用提交按钮替换按钮
将事件处理程序绑定到窗体

这样：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <title>Google Visualization Dohnut Chart Text Position</title>
  <style>
  </style>
</head>

<body>
  <table class="Charts">
    <tr>
      <td>
        <div id="donutchart1" style="width: 256px; height: 256px;"></div>
      </td>
      <td>
        <div id="donutchart2" style="width: 256px; height: 256px;"></div>
      </td>
    </tr>
  </table>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load("visualization", "1", {
      packages: ["corechart"]
    });
    google.charts.setOnLoadCallback(init);


    function drawChart(chartID, heading, known, unknown) {

      var chart = new google.visualization.PieChart(document.getElementById(chartID));
      var data = google.visualization.arrayToDataTable([
        ['Knowledge', 'Out of 10'],
        ['Known', known],
        ['Unknown', unknown]
      ]);
      var options = {
        title: heading,
        pieHole: 0.7,
        colors: ['#000000', '#cdcdcd'],
        pieSliceText: 'none',
        legend: {
          position: 'none'
        },
        tooltip: {
          text: 'percentage'
        },
        tooltip: {
          textStyle: {
            fontSize: 12
          }
        }
      };

      chart.draw(data, options);
    }

    function centerText(chart, idx, X, Y) {
      var cht = document.querySelector(chart);
      var txt = document.querySelectorAll(chart + " text");
      //var chW = cht.width/2;
      //var chH = cht.height/2;
      //var txW = txt[idx].width/2;
      //var txH = txt[idx].height/2;
      //var W = chW - txW;
      //var H = chH - txH;
      txt[idx].setAttribute('x', X);
      txt[idx].setAttribute('y', Y);
    }

    function init() {
      drawChart('donutchart1', 'VB.NET', 8, 2);
      drawChart('donutchart2', 'Javascript', 4, 6);
      centerText('#donutchart1', 0, 112, 130);
      centerText('#donutchart2', 0, 106, 130);
    }
  </script>
</body>

</html>

document.querySelector("#js_example").addEventListener("submit", myFunction);

function myFunction (event) {
    event.preventDefault();
    console.log("Submit event fired on form with id " + this.id);
}

（注意：Stackoverflow的配置阻止此演示工作并触发错误：阻止表单提交到''，因为表单的框架是沙箱并且未设置'allow-forms'权限。。工作演示是hosted externally）

Answer 3

有没有办法在用户选择所述文本框时按Enter键激活文本框中的greet（）函数？

是的，如果在通过检查document.activeElement

的值触发提交事件时选中了文本框，则可以拒绝提交

例如，使用为具有id属性的元素设置的全局变量，并在窗口加载后添加提交处理程序：

window.onload = function (){

    js_form.onsubmit = function () {
       if( document.activeElement == name_form) {
           greet();
           return false;
       }
    }
 };

允许您在以后单独添加真实的提交按钮。要阻止从任何输入元素提交，而不是测试特定的（name_form），问候语测试可以更改为

    if( document.activeElement.tagName == "INPUT") {

按下输入后的表单提交

3 个答案: