여러 이벤트 결합

Question

텍스트 필드와 버튼이 있습니다. 버튼을 클릭하거나 에을 입력하면 기능이 실행됩니다.

내 접근 방식을위한 것입니다. 그러나, 그 2 개의 기능 (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

HTML

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

자바 스크립트를 사용하여 눌러 제출할 수 양식은 동봉 된 버튼 중 또는 클릭 내부 입력에 입력 .on('listOfEvents')

기능을 실행해야 할 때를 확인하기 위해 몇 가지 추가 규칙 만 있으면됩니다.

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

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

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

Answer 2

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>

당신은 양식에 입력하고 버튼을 포장하고 폼의 제출 이벤트를 수신 할 수 있습니다.

여러 이벤트를 수신 할 수 있습니다

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

Answer 3

@eltonkamami의 대답은 하나의 생각과 내 생각은 다음과 같이 두 입력 필드와 버튼 같은 클래스를 제공하는 것입니다 : 입력 필드가있을 때마다

이

(그러나,이 트리거 변경)

$(".same").bind("click keypress", function() { 
 
    getInput(); 
 
}); 
 

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

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

홉 전자는 데 도움이 : 정말

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()) 
} 

우리는 e.key 또는 e.type 매개 변수

이 시도

하여 클릭과 키 누름을 차별화 할 수

Answer 5

,

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>