Question

我试图创建一个表单元素的方法，当＆＃34;输入＆＃34;时，将调用允许定义函数的元素。键被按下，表单被聚焦。这是一个测试代码：

<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>

Answer 1

没有必要这样做。如果<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()。

Answer 2

Greg回答了这个问题，但这是另一种方法：

<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进行登录，则可以添加到最后一个文本框（pass或captcha），这样当用户按Enter键时，将调用login函数。

当原型“进入”时，从表单调用函数

2 个答案: