Question

我有一个文本字段和一个按钮。单击按钮或点击 enter 时，应执行一个函数。

我的方法是有效的。但是，是否可以将这两个函数（click和keypress）结合起来，以便我只有1个？

$("button").click(function() {
  getInput();
});

$("#name").keypress(function(e) {
  if (e.which == 13) {
    getInput();
  }
});

function getInput() {
  alert($("#name").val())
}

所以我需要追加这些事件。

Here is a fiddle

Answer 1

function getInput(){
  return $(".result").text($("input").val());
}

$("form").on("submit", (ev)=>{
  ev.preventDefault();
  // handle submission
  getInput();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <input type="text" />
  <button>ok</button>
</form>
<div class="result"></div>

您可以将输入和按钮包装在表单中，并在该表单上侦听提交事件。可以通过在其中输入输入或单击附带的按钮

来提交表单

HTML

<form action="">
  <input type="text" />
  <button>ok</button>
</form>

Javascript

$("form").on("submit", (ev)=>{
  ev.preventDefault();
  // handle submission
  getInput();
})

Answer 2

您可以使用.on('listOfEvents')

收听多个事件

您只需要一些额外的规则来检查何时需要运行功能。

＆＃13;

$("button, #name").on('click keypress', function(e) {
    if ($(e.currentTarget).attr('id') == 'submit' || e.which == 13) {
	  	getInput();
    }
});

function getInput() {
    alert($("#name").val())
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" />
<button id="submit">
  OK
</button>

＆＃13;

Answer 3

@eltonkamami回答是一个想法，我的想法是为输入字段和按钮提供相同的类，如下所示：

（但是，只要输入字段发生变化，就会触发）

＆＃13;

$(".same").bind("click keypress", function() {
  getInput();
});

function getInput() {
  console.log($("#name").val())
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" class="same" />
<button id="submit" class="same">
  OK
</button>

＆＃13;

希望有所帮助：）

Answer 4

$("button,#name").on("click keypress",function(e) {
  //alert($(e.currentTarget).html());
  if (e.which == 13) {
    getInput();
  }else if(event.type == 'click'){
    getInput();
  }
});

function getInput() {
  alert($("#name").val())
}

Answer 5

我们可以通过e.key或e.type参数

来区分点击和按键

试试这个，

var getInput = function(e) {    
  if((e.which & e.which==13) || !e.key) 
    //e.key is a parameter for keypress event and not for click
    alert($("#name").val())
}

$("button").click(getInput);

$("#name").keypress(getInput);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<input type="text" id="name" class="same" />
<button id="submit" class="same">
 Click
</button>

结合几个事件

5 个答案: