当通过原型“输入”时从窗体调用函数

我正在尝试为表单创建一个方法当按下“回车”键并且表单被聚焦时，将调用允许定义函数的元素。这里是一个测试代码：当通过原型“输入”时从窗体调用函数

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Teste Form Enter</title> 
<script type="text/javascript" language="javascript"> 
Element.prototype.addEnterEvent = function(Func){ 
    var me = this; 
    this.gotFocus = false; 
    this.addEventListener("focus", function(){ me.gotFocus = true; }, false); 
    this.addEventListener("focusOut", function() { me.gotFocus = false; }, false); 
    window.addEventListener("keyPress", function(e) { console.log("Hit!"); if(me.gotFocus && e.which==13) window[Func](); }, false); 
} 

function formHandler(){ 
    alert("Anything: "+document.forms["test"].anything.value); 
} 

function ini(){ 
    document.getElementById("test").addEnterEvent(formHandler); 
} 

</script> 
</head> 

<body onload="ini();"> 
<form name="test" id="test" onsubmit="return false;"> 
    <label>Anything: </label> 
    <input type="text" name="anything" /> 
    <br /> 
    <button onclick="formHandler();" type="button">Hit Enter</button> 
</form> 
</body> 
</html>

目的是如果输入命中，如果按下按钮，将会调用相同的函数。没有错误信息，既没有预期的结果，也没有任何反应。我把console.log和关键事件不是射击 - 所以没有任何反应。为什么？

编辑：尝试使用建议，应该工作，但形式发送后运行formHandler，我不希望出现这种情况：

<script type="text/javascript" language="javascript"> 
function formHandler(formElement){ 
    alert("Anything: "+formElement.elements.anything.value); 
} 
</script> 
</head> 

<body> 
<form action="#" name="test" id="test" onsubmit="formHandler(); return false;" method="get"> 
    <label>Anything: </label> 
    <input type="text" name="anything" /> 
    <br /> 
    <button onclick="formHandler();" type="submit">Hit Enter</button> 
</form>

来源

2014-05-01 Gustavo

有没有必要做这个。如果<form>标签有一个action属性和至少一个提交按钮，然后就可以使用的onsubmit：

<form action="#" method="GET" onsubmit="formHandler(event, this); return false;"> 
    <input type="text" name="foo"> 
    <button type="button">Submit</button> 
</form>

注意<button type="button" />将无法正常工作。它必须是<button type="submit" />或<input type="submit|image" />

编辑：改变了formHandler方法有点所以form被传递作为参数。另请参阅对onsubmit属性的轻微更改，将this传递给formHandler函数。

function formHandler(event, form) { 
    event.preventDefault(); 
    alert(form.elements.foo.value); 
}

编辑：改变了代码在我的答案event对象传递到处理程序，并调用preventDefault()。

来源

2014-05-01 18:52:26

它工作太多了！它运行脚本formHandler，但发送表单，女巫是不受欢迎的。在我所做的测试中，如果有提交按钮，则表单将发送，并在onsubmit中返回false。理论上来说，我认为应该起作用，但不是在现实生活中。但是，在这里探索一个好点。 – Gustavo

您需要将'event'对象传递给处理函数，然后调用'event.preventDefault（）'以防止提交表单。 –

是的，preventDefault将完成这项工作！不过，我用addEventListener做了一个代码。你想完成你的答案，所以我可以标记它，或者我应该回答自己的问题吗？ – Gustavo

格雷格回答了这个问题，但这是做同样的另一种方法：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Teste Form Enter</title> 
<script type="text/javascript" language="javascript"> 
function formHandler(e){ 
    e.preventDefault(); 
    console.log(e.target.elements.anything.value); 
    alert("Anything: "+e.target.elements.anything.value); 
} 
window.addEventListener("load", function(){ 
     console.log("initialized..."); 
     document.getElementById("test").addEventListener("submit", formHandler, true); 
    }, false); 
</script> 
</head> 

<body> 
<form action="#" name="test" id="test" method="get"> 
    <label>Anything: </label> 
    <input type="text" name="anything" /> 
    <br /> 
    <button type="submit">Hit Enter</button> 
</form> 
</body> 
</html>

如果你不使用的形式，或想样机试用，这里是一个开始：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Teste Form Enter</title> 
<script type="text/javascript" language="javascript"> 
Element.prototype.addEnterEvent = function(Func){ 
    var me = this; 
    this.Func = Func; 
    this.gotFocus = false; 
    this.addEventListener("focus", function(){ me.gotFocus = true; }, false); 
    this.addEventListener("blur", function(){ me.gotFocus = false; }, false); 
    window.addEventListener("keyup", function(e) { 
      if(me.gotFocus && e.which==13) { 
       Func(); 
      } 
     }, false); 
} 

function enterHandler(){ 
    alert("Anything: "+document.getElementById("anything").value); 
} 

function ini(){ 
    document.getElementById("anything").addEnterEvent(enterHandler); 
    //window.addEventListener("keyup", function(e){ console.log("Key: "+e.which); }, false); 
} 

</script> 
</head> 

<body onload="ini();"> 
    <h1>OnEnter Test</h1> 
    <label>Anything: </label> 
    <input type="text" name="anything" id="anything" /> 
    <br /> 
    <button onclick="enterHandler();" type="button">Hit Enter</button> 
</body> 
</html>

如果您在Ajax中进行登录，您可以添加到最后一个文本框（传递或验证码），因此当用户点击输入时，登录功能将被调用。

来源

2014-05-02 17:57:13 Gustavo

当通过原型“输入”时从窗体调用函数

回答

相关问题