답변:
당신은 당신의 자신의 사용자 정의 이벤트를 연결할 수 있습니다
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});e.keyCode키 e.which마다 사용하는 브라우저마다 키 가 다르므로 사용하는 것이 좋습니다 . 이렇게하면 모든 브라우저에서 동일한 버튼을 처리 할 수 있습니다.
$('#textbox').on('keypress', function (e) {
if(e.which === 13){
//Disable textbox to prevent multiple submit
$(this).attr("disabled", "disabled");
//Do Stuff, submit, etc..
//Enable the textbox again if needed.
$(this).removeAttr("disabled");
}
});플러그인은 다음과 같습니다. (Fiddle : http://jsfiddle.net/maniator/CjrJ7/ )
$.fn.pressEnter = function(fn) {
return this.each(function() {
$(this).bind('enterPress', fn);
$(this).keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterPress");
}
})
});
};
//use it:
$('textarea').pressEnter(function(){alert('here')})$플러그인에 변수를 사용하는 것은 충돌을 일으킬 수 있으므로 좋은 생각이 아닙니다.
$("#myInput").bind('click, onEnter', myCallback);다른 것을 할 필요없이 작동 할 수 있습니까?
여기 jquery 플러그인이 있습니다.
(function($) {
$.fn.onEnter = function(func) {
this.bind('keypress', function(e) {
if (e.keyCode == 13) func.apply(this, [e]);
});
return this;
};
})(jQuery);사용하려면 코드를 포함시키고 다음과 같이 설정하십시오.
$( function () {
console.log($("input"));
$("input").onEnter( function() {
$(this).val("Enter key pressed");
});
});func.apply(this). 콜백 함수 내에서 this정상적으로 이벤트가 트리거 된 요소에 액세스하는 데 사용할 수 있습니다 .
e.preventDefault(); e.stopPropagation();안쪽에 추가 하십시오 if (e.keyCode).
해야 잘 지적 를 사용하는 것이 live()jQuery를에가되었습니다 되지 버전 이후 1.7및되었습니다 제거 jQuery를에 1.9. 대신 사용하는 on()것이 좋습니다.
다음과 같은 잠재적 인 문제를 해결하므로 다음과 같은 바인딩 방법론을 적극 권장합니다.
document.body$ selector를 두 번째 인수로 전달하면 on()리 바인딩 또는 이중 바인딩 이벤트를 처리하지 않고도 DOM에서 요소를 연결, 분리, 추가 또는 제거 할 수 있습니다. 이는 이벤트가 직접 이 document.body아닌 연결되어 있기 때문에 추가, 제거 및 다시 추가 할 수 있으며 이벤트에 바인딩 된 이벤트를로드하지 않음을 의미합니다.$selector$selectoroff()before 를 호출 on()하면이 스크립트는 실수로 이중 바인딩 이벤트에 대해 걱정할 필요없이 페이지 본문 또는 AJAX 호출 본문 내에있을 수 있습니다.$(function() {...})이 스크립트를 페이지의 본문 또는 AJAX 호출의 본문에서 다시로드 할 수 있습니다. $(document).ready()AJAX 요청에 대해서는 발생 $(function() {...})하지 않습니다.예를 들면 다음과 같습니다.
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $selector = $('textarea');
// Prevent double-binding
// (only a potential issue if script is loaded through AJAX)
$(document.body).off('keyup', $selector);
// Bind to keyup events on the $selector.
$(document.body).on('keyup', $selector, function(event) {
if(event.keyCode == 13) { // 13 = Enter Key
alert('enter key pressed.');
}
});
});
</script>
</head>
<body>
</body>
</html>HTML 코드 :-
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">자바 스크립트 코드
function AddKeyPress(e) {
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13) {
document.getElementById('btnEmail').click();
return false;
}
return true;
}양식에 기본 제출 버튼이 없습니다
또 다른 미묘한 변형. 나는 약간의 힘을 분리하여 갔으므로 enter 키를 잡을 수있는 플러그인이 있고 이벤트에 정상적으로 바인딩합니다.
(function($) { $.fn.catchEnter = function(sel) {
return this.each(function() {
$(this).on('keyup',sel,function(e){
if(e.keyCode == 13)
$(this).trigger("enterkey");
})
});
};
})(jQuery);그런 다음 사용 중입니다.
$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });이 변형을 통해 이벤트 위임을 사용할 수 있습니다 (아직 만들지 않은 요소에 바인딩).
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });keypressjQuery 문서를 읽을 때까지 enter 버튼으로 이벤트를 시작 하지 못하고 얼마 동안 내 머리를 긁었습니다.
" 키 입력 이벤트는 브라우저가 키보드 입력을 등록 할 때 요소로 전송됩니다. 이것은 키 다운 이벤트가 아닌 Shift 키, Esc 및 삭제 트리거 키 다운 이벤트와 같은 수정 자 및 비 인쇄 키를 제외하고 키 다운 이벤트와 유사합니다. "( https://api.jquery.com/keypress/ )
엔터 버튼을 누르기 위해 keyup또는 keydown이벤트 를 사용해야했습니다 .