form안에 input과 button이 같이 있을때 input enter시에 button의 이벤트가 발생하는 문제

HTML 2013. 9. 5. 09:54

아래 코드를 돌려보면 이유를 알수 있습니다. 

input form에서 엔터를 쳤을때.

1번 : 반응없음 

2번 : submit

3번 : button의 이벤트 발생 (여러개일때 가장 앞의 버튼의 이벤트 호출)

4번 : 반응없음.

FORM 안에 BUTTON을 사용한다면 type="button" 속성을 추가해야 합니다.


<!DOCTYPE html>
<html>
<head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
       <title>button test</title>

</head>
<body class="account-save-page">
<h5>1. input밖에 없음.</h5>
    <form>
        <input type="text">
        <input type="text">
        <input type="text">
    </form>
<h5>1. input 과 버튼 (이벤트 없음.)</h5>
    <form>
        <input type="text">
        <input type="text">
        <input type="text">
        <button>클릭</button>
    </form>

<h5>1. input 과 버튼 (click 이벤트 있음)</h5>
    <form>
        <input type="text">
        <input type="text">
        <input type="text">
        <button onclick="javascript:alert('alert!')">클릭</button>
    </form>

<h5>1. input 과 버튼 속성 type="button"(click 이벤트 있음)</h5>
    <form>
        <input type="text">
        <input type="text">
        <input type="text">
        <button type="button" onclick="javascript:alert('alert!')">클릭</button>
    </form>
</body>

http://www.w3schools.com/tags/tag_button.asp 참조.
If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.

button type = { button | submit | reset } 이고 브라우저마다 default type이 다를수 있네요. 
글고 IE8 Standards mode에서 default type=submit 이라고 하네요.

Remarks
The default value of the type attribute depends on the current document compatibility mode. The default value is submit. In other compatibility modes the default value is button.
When the BUTTON element is submitted in a form, the value depends on the current document compatibility mode.
Windows Internet Explorer 8 and later. The default value of the type attribute depends on the current document compatibility mode. In IE8 Standards mode, the default value is submit. In other compatibility modes and earlier versions of Windows Internet Explorer, the default value is button.


'HTML' 카테고리의 다른 글

ie9 이하에서의 placeholder 사용.  (0) 2015.03.18
bootstrap Glyphicons + font awesome  (0) 2015.03.18
jQuery Waypoints 스크롤 이벤트  (0) 2015.03.18
widget 컴포넌트 gridster  (0) 2015.03.18
carousel(캐러셀) UI  (0) 2015.03.17
Posted by 마법수정화살
,

티스토리툴바