Question

我有以下HTML代码：

<p>
    <input id='addItemName' name='addItemName' placeholder='Item Name'>
    <input id='addItemValue' name='addItemValue' placeholder='Value'>
    <button id='addItemButton' onclick='addItem()'>Add Item</button>
</p>

虽然此代码未被<form>标记包围（我不需要它，因为在<input>字段中输入的数据仅由JavaScript而不是PHP处理），我想为用户提供一个选择：用鼠标或点击一个按钮，在编辑（聚焦）这两个字段中的任何一个时点击'Enter'。

我不需要单独的事件来点击'Enter'来由JS处理。我只是想让'Enter'命中与按钮做同样的事情。再次，由于页面刷新，没有<form>。

感谢。

UPD ：好的，如果<form>，<button type='button'>实际上没问题，因此无法提交，因此无需刷新。尽管如此，即使字段和按钮位于同一个<form>，“输入”也无效。

Answer 1

你可以尝试这样的事情：

<强> HTML：

<input id='addItemName' name='addItemName' placeholder='Item Name' onkeyup="inputKeyUp(event)">

<强>使用Javascript：

function inputKeyUp(e) {
    e.which = e.which || e.keyCode;
    if(e.which == 13) {  //Key code of Enter
        addItem();
    }
}

或者你可以试试这个：

<强> HTML：

 <form action="javascript:void(0);" onsubmit="addItem();">
     <input id='addItemName' name='addItemName' placeholder='Item Name'>
     <input id='addItemValue' name='addItemValue' placeholder='Value'>
     <button id='addItemButton'>Add Item</button>
 </form>

<强> JavaScript的：

function addItem(){
      // do your things here
      return false;
 }

工作示例位于Fiddle.

Answer 2

我建议您使用表单标记，然后在提交处理程序中捕获事件并使用event.preventDefault（）停止它。

Answer 3

这可以通过将keypress事件添加到输入并检查是否正确按下回车键来完成

但在我的诚实意见中，使用带有表单的输入字段将是最好的主意。

Answer 4

这是一个类似的示例，它将提供输入按钮事件。

http://jsfiddle.net/e4CzL/

var element=document.createElement("p");
var node=document.createTextNode("hello");
element.appendChild(node);

document.getElementsByTagName("p")[0].onkeypress=function(e){

if(e.keyCode===13){
 alert("Item will be appended!");
 document.getElementsByTagName("p")[0].appendChild(element);
}

else{
 //do nothing   
}

};

连接按钮到没有形式的输入字段

4 个答案: