HTML 캡처 입력 키 및 탭 키

Enter 키가 양식을 제출하지 못하게하려면 양식 또는 다음 요소의 다음 필드로 바로 이동하기 위해 Tab 키 역할을하고 싶습니다.HTML 캡처 입력 키 및 탭 키

HTML/JS에서 가능합니까?

입력 버튼을 탭으로 만들 수없는 경우 양식 제출을 방지하고 HTML의 버튼을 사용하여 양식 만 제출할 수있는 방법이 있습니까 ??

편집 : 나는 또 다른 문제를 요구했을 때

나는이 문제에 대한 해결책을받은!

here 해결책을 찾을 수 있습니다.

2011-01-04 sikas

예, 가능하지만 기본 동작을 변경하여 사용자를 혼동하는 이유는 무엇입니까? 양식을 검증하고 ('onsubmit'), 필드가 누락되거나 잘못된 입력이있는 경우 사용자에게 답변을 수정하도록 요청하는 것이 좋습니다. – zzzzBov

@zzzzBov : Enter 키에서 양식을 제출하지 못하게하고 싶습니다. 양식의 버튼으로 만 작업을 수행하고 싶습니다. – sikas

읽을 수 있습니다. 당신이 제안하는 것은 나쁜 생각입니다. "왜?" 너는 구속력이있다. 아마도 접근성에 대해 생각해 보지 않았을 것입니다.시각 장애가있는 사용자는 특정 상호 작용 (즉 : 탭 및 입력)을 사용하여 양식을 제출합니다. 당신이 그 키 코드를 무시하면, 당신은 그들의 경험을 망치고 있습니다. **하지 마세요 **. – zzzzBov

키 누르기를 모방하는 방법을 모르지만 일부 jQuery를 사용하여이를 해결할 수도 있습니다.

$(document).keyup(function(e) { 
    if(e.keyCode == 13) 
    { 
    //Code to imitate keypress of Tab key 
    } 
});

편집 : 당신이 언급 한 것처럼 다음 필드로 갈 것 빠른 jsFiddle을 "모방"탭 프레스를 제작. 오히려, 양식을 제출에서 입력 버튼을 방지하기 위해 내 머리 위로 떨어져

jsFiddle

출처

2011-01-04 16:17:42

작동하지 않았습니다! – sikas

제가 대안을 찾고 있습니다 - 이전 제안은 긍정적 인 리뷰가 여러 개 있다고 생각했습니다. –

+1 upvoted 및 어떤 이유로 든 작동하지 않았다 stackoverflow에서 출처가 유효한 대답이었던 무언가에 대한 아래로 투표가 가혹한 것입니다. –

,하는 제출 단추를 사용하지 마십시오 (이 하나의 필드에 누른 키의 존재를 입력에 따라 작품) <input type="button" ... onclick="submitForm();">을 사용하여 javascript를 호출하여 양식을 제출하십시오. 나는 틀릴 수도 있지만, 이것은 폼을 제출하는 다른 요소에 입력하는 것을 막아야한다고 생각합니다.

출처

2011-01-04 16:23:32 mklauber

이것은 좋은 아이디어, mklauber입니다. ASP와 같은 것을 찾고 있었는데 전혀 생각하지 않았습니다 ... – sikas

리턴 키는 제출 버튼을 클릭하지 않고 지정된 'action' URL을 사용하여 양식을 제출합니다. 즉, 제출 버튼을 없애도 반환 키를 누르면 양식이 제출됩니다. –

@Andy E는 [HTML5에 적합하지 않습니다] (http://dev.w3.org/html5/spec/association-of-controls-and-forms.html#implicit-submission)입니다. 제출 단추가 정의되지 않은 경우 Enter 키는 아무 것도하지 않습니다. HTML5에서 명시된 것과 동일한 동작을 HTML4에서 볼 수 있습니다. – zzzzBov

<html> 
<body> 
<script> 
function tmpFn(val){ 
    if(event.keyCode=='13'){ 
    if (val<4) 
     document.forms["yourform"].elements["box" + (val+1)].focus(); 
    else 
     document.yourform.submit(); 
    return false; 
    } 
    return true; 
} 
</script> 
<body> 
<form name="yourform" action="#"> 
<input type="text" name="box1" onkeypress="return tmpFn(1)"><br> 
<input type="text" name="box2" onkeypress="return tmpFn(2)"><br> 
<input type="text" name="box3" onkeypress="return tmpFn(3)"><br> 
<input type="text" name="box4" onkeypress="return tmpFn(4)"><br> 
<input type="submit" name="done" value="Submit"> 
</form> 
</body> 
</html>

편집 : '평가'.. 감사합니다 팀과 앤디를 사용 자제!

출처

2011-01-04 16:36:00 SuperSaiyan

제발 악의가 있으면 안됩니다. 'eval' 줄을'document.yourform '으로 변경하십시오. focus()' –

'document.forms [ "yourform"]로 변경하십시오. elements [ "box"+ (val + 1)]. focus();' –

감사합니다 Andy and Tim! :-) – SuperSaiyan

액세스 가능성/유용성을 이유로 Enter 키가 양식을 제출하지 못하게해야합니다 (브라우저가이를 수행한다고 가정하고 IIRC, 일부 구형 브라우저는 그렇지 않음).

버튼은 당신이 마다 양식 제출 일어날 싶은 click 핸들러가 제출 있기 때문에이 작업을 수행 할 수 있다고 가정하면, 당신은 대신 별도의 함수로 그 코드를 이동하고 폼의 submit에서 호출한다 행사.

$('#myForm').submit(function(e) { 
     if (!isValid()) { 
      e.preventDefault(); // Could also be `return false;` but I prefer preventDefault. 
     } 
});

이 the docs를 참조하십시오

jQuery를, 그것은 같이 보일 것입니다.

참고로 일부 인증을 시도하는 경우 validation plugin을 확인해야합니다.

출처

2011-01-04 16:53:55

양식에 기본 동작이 없으므로 버튼을 누르지 않으면 양식이 제출되어서는 안됩니다. 그리고 나는 장애인들이 이것을 (적어도 지금은) 사용하지 않을 것이라고 생각합니다 ... 미래에 언제든지 고객이 장애인들에게 사용할 수 있도록하기로 결정할 때 우리는 음성과 같은 것을 사용하여 현장으로 안내 할 수 있습니다 . – sikas

HTML 캡처 입력 키 및 탭 키

답변

관련 문제