jquery 엔터키를 잡고 이벤트를 탭으로 변경하는 방법
저는 잡동사니 해결책을 원해요, 가까이 있어야 하는데 어떻게 해야 하나요?
$('html').bind('keypress', function(e)
{
if(e.keyCode == 13)
{
return e.keyCode = 9; //set event key to tab
}
});
false를 반환할 수 있고 엔터키가 눌리는 것을 방지합니다. 그냥 키코드를 9로 변경해서 탭을 만들 수 있다고 생각했는데 작동하지 않는 것 같습니다.가까이 가야 하는데 무슨 일이에요?
$('input').on("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
완벽하게 작동합니다!
$('input').keydown( function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if(key == 13) {
e.preventDefault();
var inputs = $(this).closest('form').find(':input:visible');
inputs.eq( inputs.index(this)+ 1 ).focus();
}
});
왜 이런 간단한 일은 안 되는 거지?
$(document).on('keypress', 'input', function(e) {
if(e.keyCode == 13 && e.target.type !== 'submit') {
e.preventDefault();
return $(e.target).blur().focus();
}
});
이렇게 하면 이미 입력된 "제출" 유형에 초점을 맞추지 않는 한 제출을 트리거하지 않으며, 중단한 위치에 그대로 놓이게 됩니다.이를 통해 페이지에 동적으로 추가되는 입력에도 적용할 수 있습니다.
참고: 흐림()은 "흐림" 이벤트 청취자가 있을 수 있는 모든 사람을 위해 초점() 앞에 있습니다.프로세스가 작동하는 데 필요한 것은 아닙니다.
PlusAsTab: numpad plus key를 탭 키와 동등하게 사용하기 위한 jQuery 플러그인.
PlusAsTab은 이 데모에서와 같이 Enter 키를 사용하도록 구성할 수도 있습니다.이 질문에 대한 이전 답변을 보십시오.
사용자의 경우 전체 페이지에 대해 엔터키를 탭 기능으로 교체합니다(옵션에서 엔터키를 탭으로 설정한 후).
<body data-plus-as-tab="true">
...
</body>
제가 사용해온 것은 다음과 같습니다.
$("[tabindex]").addClass("TabOnEnter");
$(document).on("keypress", ".TabOnEnter", function (e) {
//Only do something when the user presses enter
if (e.keyCode == 13) {
var nextElement = $('[tabindex="' + (this.tabIndex + 1) + '"]');
console.log(this, nextElement);
if (nextElement.length)
nextElement.focus()
else
$('[tabindex="1"]').focus();
}
});
탭 인덱스에 주의를 기울이며 양식이 아닌 전체 페이지에 지정됩니다.
live jQuery되었습니다를 . 이제 사용해야 합니다.on
Ben's 플러그인을 기반으로 이 버전이 선택하고 Submit을 허용하는 옵션을 전달할 수 있습니다.즉$("#form").enterAsTab({ 'allowSubmit': true});그러면 submit 버튼이 이벤트를 처리하는 경우 enter가 양식을 제출할 수 있습니다.
(function( $ ){
$.fn.enterAsTab = function( options ) {
var settings = $.extend( {
'allowSubmit': false
}, options);
this.find('input, select').live("keypress", {localSettings: settings}, function(event) {
if (settings.allowSubmit) {
var type = $(this).attr("type");
if (type == "submit") {
return true;
}
}
if (event.keyCode == 13 ) {
var inputs = $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
idx = -1;
} else {
inputs[idx + 1].focus(); // handles submit buttons
}
try {
inputs[idx + 1].select();
}
catch(err) {
// handle objects not offering select
}
return false;
}
});
return this;
};
})( jQuery );
저는 수락된 답변에서 나온 코드를 jQuery 플러그인으로 작성했는데, 이것이 더 유용하다고 생각합니다. (또한, 그것은 숨김, 비활성화, 읽기 전용 폼 요소를 무시합니다.)
$.fn.enterAsTab = function () {
$(this).find('input').live("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])"),
idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
return this;
};
이렇게 하면 $('#form-id')를 수행할 수 있습니다.AsTab();...아직 아무도 그것을 $플러그인으로 올리지 않았고 그들이 쓰기에 완전히 직관적이지 않기 때문에 내가 게시할 것이라고 생각했습니다.
이것이 마침내 나에게 완벽하게 작동하는 것입니다.jqeasyui를 사용하고 있는데 잘 작동합니다.
$(document).on('keyup', 'input', function(e) {
if(e.keyCode == 13 && e.target.type !== 'submit') {
var inputs = $(e.target).parents("form").eq(0).find(":input:visible"),
idx = inputs.index(e.target);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus();
inputs[idx + 1].select();
}
}
});
모든 유형의 입력 포함
$(':input').keydown(function (e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if (key == 13) {
e.preventDefault();
var inputs = $(this).closest('form').find(':input:visible:enabled');
if ((inputs.length-1) == inputs.index(this))
$(':input:enabled:visible:first').focus();
else
inputs.eq(inputs.index(this) + 1).focus();
}
});
이것이 제 해결책입니다. 피드백을 환영합니다. :)
$('input').keydown( function (event) { //event==Keyevent
if(event.which == 13) {
var inputs = $(this).closest('form').find(':input:visible');
inputs.eq( inputs.index(this)+ 1 ).focus();
event.preventDefault(); //Disable standard Enterkey action
}
// event.preventDefault(); <- Disable all keys action
});
저는 위의 내용을 최대한 활용하여 양식 외의 어떤 입력을 사용해도 작업할 수 있는 기능을 추가했습니다.또한 마지막 입력에 도달하면 지금 시작하기 위해 적절히 루프백합니다.그리고 오직 한 입력의 경우에만 블러링이 발생하면 단일 입력의 초점을 다시 맞춰 외부 블러/포커스 핸들러를 트리거합니다.
$('input,select').keydown( function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if(key == 13) {
e.preventDefault();
var inputs = $('#content').find(':input:visible');
var nextinput = 0;
if (inputs.index(this) < (inputs.length-1)) {
nextinput = inputs.index(this)+1;
}
if (inputs.length==1) {
$(this).blur().focus();
} else {
inputs.eq(nextinput).focus();
}
}
});
이러한 솔루션은 데이터 그리드에서 작동하지 않았습니다.그들이 그러길 바랬는데요.다음 입력, 열, 행 또는 다른 것으로 이동하기 위해 Tab 또는 Enter가 필요하지 않습니다..focusout 또는 .change를 트리거하려면 Enter 키만 있으면 되고 datagrid가 데이터베이스를 업데이트합니다.그래서 저는 관련 텍스트 입력에 "엔터" 클래스를 추가했고 이것이 저에게 효과적이었습니다.
$(function() {
if ($.browser.mozilla) {
$(".enter").keypress(checkForEnter);
} else {
$(".enter").keydown(checkForEnter);
}
});
function checkForEnter(event) {
if (event.keyCode == 13) {
$(".enter").blur();
}
}
$('input').live("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input:visible");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
눈에 보이는 입력에 초점을 맞출 수 없습니다.
이 질문이 신보다 더 오래된 질문이라는 것은 알지만, 그렇게 우아한 대답은 본 적이 없습니다.
doc.on('keydown', 'input', function(e, ui) {
if(e.keyCode === 13){
e.preventDefault();
$(this).nextAll('input:visible').eq(0).focus();
}
});
인간적으로 가능한 한 적은 줄로 일을 끝내는 것 같습니다
비활성화된 모든 요소와 읽기 전용 요소를 필터링해야 합니다.나는 이 코드가 버튼을 덮어서는 안된다고 생각합니다.
$('body').on('keydown', 'input, select, textarea', function(e) {
var self = $(this),
form = self.parents('form:eq(0)'),
submit = (self.attr('type') == 'submit' || self.attr('type') == 'button'),
focusable,
next;
if (e.keyCode == 13 && !submit) {
focusable = form.find('input,a,select,button,textarea').filter(':visible:not([readonly]):not([disabled])');
next = focusable.eq(focusable.index(this)+1);
if (next.length) {
next.focus();
} else {
form.submit();
}
return false;
}
});
저는 개발에 있어 동일한 요구사항을 가지고 있어서 이에 대한 연구를 하였습니다.지난 이틀간 jQuery.tabNext() plugin과 같이 많은 기사를 읽고 많은 해결책을 시도했습니다.
IE11에서 약간의 문제가 있었습니다(모든 IE 버전에 이 버그가 있음).입력 텍스트 뒤에 텍스트가 아닌 입력이 있을 때 선택 항목이 지워지지 않았습니다.그래서 @Sarfraz 솔루션 제안을 바탕으로 tabNext() 메서드를 직접 만들었습니다.저는 또한 그것이 어떻게 작동해야 하는지에 대해서도 생각하고 있었습니다. (현재 형태로 원을 그리거나 아마도 전체 문서를 통해서만).저는 아직도 탭인덱스 속성을 가끔 사용하기 때문에 관리하지 않았습니다.하지만 잊지 않겠습니다.
저의 기여가 모든 사람들에게 쉽게 도움이 될 수 있도록 저는 여기 https://jsfiddle.net/mkrivan/hohx4nes/ 에서 jsfiddle 예제를 만들었습니다.
여기에 예제의 자바스크립트 부분도 포함합니다.
function clearSelection() {
if (document.getSelection) { // for all new browsers (IE9+, Chrome, Firefox)
document.getSelection().removeAllRanges();
document.getSelection().addRange(document.createRange());
console.log("document.getSelection");
} else if (window.getSelection) { // equals with the document.getSelection (MSDN info)
if (window.getSelection().removeAllRanges) { // for all new browsers (IE9+, Chrome, Firefox)
window.getSelection().removeAllRanges();
window.getSelection().addRange(document.createRange());
console.log("window.getSelection.removeAllRanges");
} else if (window.getSelection().empty) { // maybe for old Chrome
window.getSelection().empty();
console.log("window.getSelection.empty");
}
} else if (document.selection) { // IE8- deprecated
document.selection.empty();
console.log("document.selection.empty");
}
}
function focusNextInputElement(node) { // instead of jQuery.tabNext();
// TODO: take the tabindex into account if defined
if (node !== null) {
// stay in the current form
var inputs = $(node).parents("form").eq(0).find(":input:visible:not([disabled]):not([readonly])");
// if you want through the full document (as TAB key is working)
// var inputs = $(document).find(":input:visible:not([disabled]):not([readonly])");
var idx = inputs.index(node) + 1; // next input element index
if (idx === inputs.length) { // at the end start with the first one
idx = 0;
}
var nextInputElement = inputs[idx];
nextInputElement.focus(); // handles submit buttons
try { // if next input element does not support select()
nextInputElement.select();
} catch (e) {
}
}
}
function tabNext() {
var currentActiveNode = document.activeElement;
clearSelection();
focusNextInputElement(currentActiveNode);
}
function stopReturnKey(e) {
var e = (e) ? e : ((event) ? event : null);
if (e !== null) {
var node = (e.target) ? e.target : ((e.srcElement) ? e.srcElement : null);
if (node !== null) {
var requiredNode = $(node).is(':input')
// && !$(node).is(':input[button]')
// && !$(node).is(':input[type="submit"]')
&& !$(node).is('textarea');
// console.log('event key code ' + e.keyCode + '; required node ' + requiredNode);
if ((e.keyCode === 13) && requiredNode) {
try {
tabNext();
// clearSelection();
// focusNextInputElement(node);
// jQuery.tabNext();
console.log("success");
} catch (e) {
console.log("error");
}
return false;
}
}
}
}
document.onkeydown = stopReturnKey;
저는 제 생각을 따를 수 있도록 댓글도 달았습니다.
이것이 다소 오래된 것이라는 것을 알고 있지만, 같은 답을 찾고 있었는데 선택한 솔루션이 tabIndex를 준수하지 않는다는 것을 알게 되었습니다.그래서 저에게 적합한 다음과 같이 수정하였습니다.maxTabNumber는 탭 가능한 입력 필드의 최대 수를 보유하는 전역 변수입니다.
$('input').on("keypress", function (e) {
if (e.keyCode == 13) {
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
var tabIndex = parseInt($(this).attr("tabindex"));
tabIndex = (tabIndex + 1) % (maxTabNumber + 1);
if (tabIndex == 0) { tabIndex = 1; }
$('[tabindex=' + tabIndex + ']').focus();
$('[tabindex=' + tabIndex + ']').select();
return false;
}
});다음은 제가 작성한 jQuery 플러그인으로 엔터키를 콜백 또는 탭 키(옵션 콜백 포함)로 처리합니다.
$(document).ready(function() {
$('#one').onEnter('tab');
$('#two').onEnter('tab');
$('#three').onEnter('tab');
$('#four').onEnter('tab');
$('#five').onEnter('tab');
});
/**
* jQuery.onEnter.js
* Written by: Jay Simons
* Cloudulus.Media (https://code.cloudulus.media)
*/
if (window.jQuery) {
(function ($) {
$.fn.onEnter = function (opt1, opt2, opt3) {
return this.on('keyup', function (e) {
var me = $(this);
var code = e.keyCode ? e.keyCode : e.which;
if (code == 13) {
if (typeof opt1 == 'function')
{
opt1(me, opt2);
return true;
}else if (opt1 == 'tab')
{
var eles = $(document).find('input,select,textarea,button').filter(':visible:not(:disabled):not([readonly])');
var foundMe = false;
var next = null;
eles.each(function(){
if (!next){
if (foundMe) next = $(this);
if (JSON.stringify($(this)) == JSON.stringify(me)) foundMe = true;
}
});
next.focus();
if (typeof opt2 === 'function')
{
opt2(me, opt3);
}
return true;
}
}
}).on('keydown', function(e){
var code = e.keyCode ? e.keyCode : e.which;
if (code == 13)
{
e.preventDefault();
e.stopPropagation();
return false;
}
});
}
})(jQuery);
} else {
console.log("onEnter.js: This class requies jQuery > v3!");
}input,
select,
textarea,
button {
display: block;
margin-bottom: 1em;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input id="one" type="text" placeholder="Input 1" />
<input id="two" type="text" placeholder="Input 2" />
<select id="four">
<option selected>A Select Box</option>
<option>Opt 1</option>
<option>Opt 2</option>
</select>
<textarea id="five" placeholder="A textarea"></textarea>
<input id="three" type="text" placeholder="Input 3" />
<button>A Button</button>
</form>다음은 입력과 선택만 하면 되고, 요소는 초점을 맞출 수 있어야 합니다.이 스크립트는 제게 더 적합합니다.
$('body').on('keydown', 'input, select', function(e) {
if (e.key === "Enter") {
var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
focusable = form.find('input,select,textarea').filter(':visible');
next = focusable.eq(focusable.index(this)+1);
if (next.length) {
next.focus();
} else {
form.submit();
}
return false;
}
});
누군가에게 도움이 될 수도 있습니다.
IE를 사용하는 경우 이 방법이 제게 아주 효과적이었습니다.
<body onkeydown="tabOnEnter()">
<script type="text/javascript">
//prevents the enter key from submitting the form, instead it tabs to the next field
function tabOnEnter() {
if (event.keyCode==13)
{
event.keyCode=9; return event.keyCode
}
}
</script>
언급URL : https://stackoverflow.com/questions/2335553/jquery-how-to-catch-enter-key-and-change-event-to-tab
'programing' 카테고리의 다른 글
| 모든 mysqli_ 함수를 맹목적으로 mysqli_로 대체할 수 있습니까? (0) | 2023.10.06 |
|---|---|
| MySQL에서 일을 빼는 방법 (0) | 2023.10.06 |
| iOS 7의 사용자 지정 글꼴 (0) | 2023.10.06 |
| jQuery - 선택한 옵션 사용 안 함 (0) | 2023.10.06 |
| c에 데이터 유형이 없는 변수 선언 (0) | 2023.10.06 |