提交表单输入

您好，所以我有以下代码提交表单输入

<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（）函数？

感谢

来源

2017-01-02 alexp2603

你指的是不是一个提交按钮按钮。相反这是一个“按钮”类型的按钮，没有隐式的副作用。 “提交”是其文字内容。 – traktor53

有一个提交按钮
绑定的事件处理程序的形式

这样的提交事件替换按钮：

document.querySelector("#js_example").addEventListener("submit", myFunction); 
 

 
function myFunction (event) { 
 
    event.preventDefault(); 
 
    console.log("Submit event fired on form with id " + this.id); 
 
}

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

（注意：Stackoverflow的配置阻止该演示程序正常工作并触发错误：由于表单的框架已被沙箱化，未设置“允许表单”权限，所以阻止向''提交表单。。一个工作演示是hosted externally）

来源

2017-01-02 00:11:04 Quentin

第一个代码块在

表单通常用于将数据发送回服务器，但它看起来像从您的按钮的“onclick”属性（它阻止窗体重新加载页面），您是只看客户端。

你可以为此使用一种形式，但更直接的方法是摆脱窗体并让你的文本框听输入键。

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

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

来源

2017-01-02 00:17:33

-1

Is there a way to activate the greet() function wihtin the text box by pressing enter while the user has selected said text box?

是的，你如果选择了文本框可以dissallow提交时提交事件通过检查发射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") {

来源

2017-01-02 00:35:40 traktor53

提交表单输入

回答

相关问题