텍스트 상자에서 Enter 키를 누르기 위한 JQuery 이벤트?
Jquery에서 사용자가 텍스트 상자에서 입력 버튼을 누를 때만 트리거되는 이벤트가 있습니까?또는 이를 포함하기 위해 추가할 수 있는 플러그인이 있습니까?그렇지 않은 경우 이 작업을 수행할 빠른 플러그인을 어떻게 작성해야 합니까?
커스텀 이벤트를 배선할 수 있습니다.
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});
$('#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')})
그러기 위한 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");
});
});
여기서의 jsfiddlehttp://jsfiddle.net/VrwgP/30/
의 사용은 주의할 필요가 있습니다.live()in jQuery는 버전 이후 더 이상 사용되지 않습니다.1.7jQuery에서 삭제되었습니다.1.9 "" " " " 를 on()를 권장합니다.
다음과 같은 잠재적인 과제를 해결하기 위해 다음과 같은 바인딩 방법을 적극 제안합니다.
- 를 에
document.body로 $건네줍니다.on()재바인딩 또는 이중바인딩 이벤트를 처리할 필요 없이 요소를 DOM에서 연결, 분리, 추가 또는 삭제할 수 있습니다.이는 이벤트가 에 첨부되어 있기 때문입니다.document.body$selectordirect( 즉, "Direct(직접)"를 의미합니다.$selector는 추가, 삭제 및 재추가 가능하며 바인드된 이벤트는 로드되지 않습니다. - 「 」를 합니다.
off()전에on()이 스크립트는 페이지 본문 내 또는 AJAX 콜 본문 내에서 실행할 수 있으며 실수로 더블바인딩 이벤트가 발생할 염려가 없습니다. - 를 크크 the the the the the the로
$(function() {...})이 스크립트는 페이지의 본문 또는 AJAX 콜 본문 내에서 다시 로드할 수 있습니다.$(document).ready()는 AJAX 요구에 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>
입력 내용이 다음과 같은 경우search , 을.on 'search' 예: 예
<input type="search" placeholder="Search" id="searchTextBox">
.
$("#searchPostTextBox").on('search', function () {
alert("search value: "+$(this).val());
});
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 */ });
//짧고 간단한 솔루션
$(document).ready(function(){
$('#TextboxId').keydown(function(event){
if (event.which == 13){
//body or action to be performed
}
});
});
나는 그것을 얻을 수 없었다.keypress jQuery jQuery documents: jQuery를 까지요.
"키 누르기 이벤트는 브라우저가 키보드 입력을 등록할 때 요소로 전송됩니다. 이것은 키다운이벤트와 비슷합니다.단, Shift, Esc, delete 등의 수식자 및 비수식 키가 키다운이벤트를 트리거하지만 키 누르기이벤트는 트리거하지 않습니다.(https://api.jquery.com/keypress/)
나는 그 제품을 사용해야만 했습니다.keyup또는keydown이벤트 입력 버튼을 누릅니다.
언급URL : https://stackoverflow.com/questions/6524288/jquery-event-for-user-pressing-enter-in-a-textbox
'programing' 카테고리의 다른 글
| mariadb 서비스를 실행하는 gitlab-ci가 MYSQL_ROOT_PASSWORD를 설정하지 않았습니다. (0) | 2023.01.14 |
|---|---|
| 침묵 "선언...호환성이 있어야 한다"라는 경고 메시지가 표시됩니다. (0) | 2023.01.14 |
| src 및 dist 폴더의 역할은 무엇입니까? (0) | 2023.01.14 |
| JavaScript의 변수 범위는 어떻게 됩니까? (0) | 2023.01.14 |
| 텍스트 파일(.py)을 IPython 노트북 셀에 로드/편집/실행/저장하는 방법 (0) | 2023.01.14 |