누군가가 리턴 키를 눌렀을 때 그리고 양식에 버튼이없는 경우 HTML 양식을 제출하는 방법을 알려주시겠습니까? 제출 버튼이 없습니다 . 대신 사용자 지정 div를 사용하고 있습니다.
답변:
IMO, 이것이 가장 깨끗한 대답입니다.
<form action="" method="get">
Name: <input type="text" name="name"/><br/>
Pwd: <input type="password" name="password"/><br/>
<div class="yourCustomDiv"/>
<input type="submit" style="display:none"/>
</form>더 좋은 점은 javascript를 사용하여 사용자 지정 div를 사용하여 양식을 제출하는 경우 javascript를 사용하여 만들고 단추에 display : none 스타일을 설정해야합니다. 이렇게하면 자바 스크립트가 비활성화 된 사용자에게 제출 버튼이 계속 표시되고 클릭 할 수 있습니다.
display : none은 IE가 입력을 무시하도록합니다. 표준 양식으로 시작하고 점진적 향상을 사용하여 제출을 숨기고 새 div를 만드는 새로운 JSFiddle 예제 를 만들었습니다 . StriplingWarrior 의 CSS 스타일을 사용했습니다 .
Enter 키를 눌렀을 때 양식을 제출하려면이 행을 따라 자바 스크립트 함수를 만듭니다.
function checkSubmit(e) {
if(e && e.keyCode == 13) {
document.forms[0].submit();
}
}
그런 다음 필요한 범위 (예 : div 태그)에 이벤트를 추가합니다.
<div onKeyPress="return checkSubmit(event)"/>
이것은 Internet Explorer 7의 기본 동작이기도합니다 (아마도 이전 버전 일 수도 있음).
다양한 javascript / jQuery 기반 전략을 시도했지만 문제가 계속 발생했습니다. 최근 발생한 문제는 사용자가 브라우저의 내장 자동 완성 목록에서 선택하기 위해 Enter 키를 사용할 때 실수로 제출하는 것과 관련이 있습니다. 마침내 회사가 지원하는 모든 브라우저에서 작동하는이 전략으로 전환했습니다.
<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>
.hidden-submit {
border: 0 none;
height: 0;
width: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
이것은 Chris Marasti-Georg가 현재 받아 들인 답변과 유사하지만를 피 display: none하면 모든 브라우저에서 올바르게 작동하는 것으로 보입니다.
위의 코드를 음수를 포함하도록 편집하여 tabindex탭 키를 캡처하지 않습니다. 기술적으로는 HTML 4에서 유효성을 검사하지 않지만 HTML5 사양에는 대부분의 브라우저에서 이미 구현 한 방식대로 작동하도록하는 언어가 포함되어 있습니다.
<button>태그를 사용하십시오 . W3C 표준에서 :
BUTTON 요소로 만든 버튼은 INPUT 요소로 만든 버튼처럼 기능하지만 더 풍부한 렌더링 가능성을 제공합니다. BUTTON 요소에 콘텐츠가있을 수 있습니다. 예를 들어, 이미지를 포함하는 BUTTON 요소는 유형이 "이미지"로 설정된 INPUT 요소와 비슷하게 작동하지만 BUTTON 요소 유형은 콘텐츠를 허용합니다.
기본적으로 양식을 제출할 수있는 javascript<button> 가 필요없는 다른 태그가 있습니다. 버튼 태그 내부를 <div>포함 하여 태그 방식으로 스타일을 지정할 수 있습니다 <img />. <input />태그 의 버튼은 거의 유연하지 않습니다.
<button type="submit">
<img src="my-icon.png" />
Clicking will submit the form
</button>
에 설정할 세 가지 유형이 있습니다 <button>. <input>버튼 유형에 매핑됩니다 .
<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>
기준
나는 <button>태그를CSS 스프라이트 그리고 약간 CSS화려하고 기능적인 폼 버튼을 얻기위한 스타일링. 예를 들어, 요소 <a class="button">와 스타일링에 대한 링크 공유에 대한 CSS를 작성할 수 있습니다 <button>.
나는 이것이 당신이 원하는 것이라고 믿습니다.
//<![CDATA[
//Send form if they hit enter.
document.onkeypress = enter;
function enter(e) {
if (e.which == 13) { sendform(); }
}
//Form to send
function sendform() {
document.forms[0].submit();
}
//]]>
키를 누를 때마다 enter () 함수가 호출됩니다. 누른 키가 Enter 키 (13)와 일치하면 sendform ()이 호출되고 처음 발견 된 양식이 전송됩니다. 이것은 Firefox 및 기타 표준 호환 브라우저에만 해당됩니다.
이 코드가 유용하다고 생각되면 반드시 투표 해주세요!
다음은 jQuery로 수행하는 방법입니다.
j(".textBoxClass").keypress(function(e)
{
// if the key pressed is the enter key
if (e.which == 13)
{
// do work
}
});
다른 자바 스크립트는 너무 다르지 않습니다. catch는 Enter 키인 "13"의 키 누르기 인수를 확인합니다.
e.which == 10습니다.
다음 스크립트를 사용하십시오.
<SCRIPT TYPE="text/javascript">
<!--
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13)
{
myfield.form.submit();
return false;
}
else
return true;
}
//-->
</SCRIPT>
사용자가 Enter를 누를 때 양식을 제출해야하는 각 필드에 대해 다음과 같이 submitenter 함수를 호출하십시오.
<FORM ACTION="../cgi-bin/formaction.pl">
name: <INPUT NAME=realname SIZE=15><BR>
password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>
이 방법을 사용합니다.
<form name='test' method=post action='sendme.php'>
<input type=text name='test1'>
<input type=button value='send' onClick='document.test.submit()'>
<input type=image src='spacer.gif'> <!-- <<<< this is the secret! -->
</form>
기본적으로 이미지 유형의 보이지 않는 입력을 추가합니다 ( " spacer.gif "는 1x1 투명 gif 임).
이런 식으로 '보내기'버튼을 사용하거나 키보드에서 엔터 를 눌러서이 양식을 제출할 수 있습니다 .
이것은 트릭입니다!
제출 버튼에 div 제출 스타일을 적용하지 않는 이유는 무엇입니까? 나는 이것에 대한 자바 스크립트가 있다고 확신하지만 더 쉬울 것입니다.
asp.net을 사용하는 경우 양식 에서 defaultButton 속성을 사용할 수 있습니다 .
실제로 제출 버튼이나 제출 이미지가 있어야한다고 생각합니다. "제출 div"를 사용하는 특별한 이유가 있습니까? 사용자 정의 스타일을 원한다면 나는 권장 <input type="image"...합니다. http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm
Chris Marasti-Georg의 예와 비슷하지만 인라인 자바 스크립트를 사용합니다. 기본적으로 Enter 키를 사용할 필드에 onkeypress를 추가합니다. 이 예제는 암호 필드에서 작동합니다.
<html>
<head><title>title</title></head>
<body>
<form action="" method="get">
Name: <input type="text" name="name"/><br/>
Pwd: <input type="password" name="password" onkeypress="if(event.keyCode==13) {javascript:form.submit();}" /><br/>
<input type="submit" onClick="javascript:form.submit();"/>
</form>
</body>
</html>
display: none버튼과 입력은 Safari와 IE에서 작동하지 않기 때문에 추가 자바 스크립트 해킹이 필요 하지 않은 가장 쉬운 방법 <button />은 양식에 절대 위치 를 추가하고 화면에서 멀리 떨어진 곳에 배치하는 것입니다.
<form action="" method="get">
<input type="text" name="name" />
<input type="password" name="password" />
<div class="yourCustomDiv"/>
<button style="position:absolute;left:-10000px;right:9990px"/>
</form>
이는 2016 년 9 월 현재 모든 주요 브라우저의 최신 버전에서 작동합니다.
분명히 <button/>원하는대로 스타일 을 지정하는 것이 좋습니다.
"autofocus"속성을 사용하면 기본적으로 버튼에 입력 포커스를 제공 할 수 있습니다. 실제로 양식 내의 컨트롤을 클릭하면 양식이 RETURN에 반응해야하는 요구 사항 인 양식에 초점이 맞춰집니다. 따라서 사용자가 양식 내의 다른 컨트롤을 클릭하지 않은 경우 "자동 초점"이이를 수행합니다.
따라서 "자동 초점"은 사용자가 RETURN을 누르기 전에 양식 컨트롤을 클릭하지 않은 경우 중요한 차이를 만듭니다.
그러나 그럼에도 불구하고 JS없이 작동하려면 여전히 두 가지 조건이 충족되어야합니다.
a) 이동할 페이지를 지정해야합니다 (비워두면 작동하지 않습니다). 내 예에서는 hello.php입니다.
b) 컨트롤이 표시되어야합니다. 페이지 밖으로 이동하여 숨길 수는 있지만 display : none 또는 visibility : hidden은 사용할 수 없습니다. 내가 한 것은 인라인 스타일을 사용하여 페이지에서 200px만큼 왼쪽으로 이동하는 것이 었습니다. 공간을 차지하지 않도록 높이를 0px로 설정했습니다. 그렇지 않으면 위와 아래의 다른 제어가 여전히 중단 될 수 있기 때문입니다. 또는 요소도 플로팅 할 수 있습니다.
<form action="hello.php" method="get">
Name: <input type="text" name="name"/><br/>
Pwd: <input type="password" name="password"/><br/>
<div class="yourCustomDiv"/>
<input autofocus type="submit" style="position:relative; left:-200px; height:0px;" />
</form>