크롬, FF, IE 및 오페라의 입력에 이상한 동작이 입력되었습니다.

브라우저 (Google 크롬, FF, IE & 오페라 모두 최신 버전 임)가있는 경우 HTML 사양에 아무것도 표시되지 않았습니다. 잘못된 유형의 입력에 onclick 처리기가 있습니다. 전문가 :크롬, FF, IE 및 오페라의 입력에 이상한 동작이 입력되었습니다.

다음 html을 사용하고 브라우저에서 개발자 콘솔 로그에 오류가 발생했다고 상상해보십시오. 하지만 그것은 단지 전체 페이지를 다시로드합니다!

<!DOCTYPE html> 
<html> 
<body> 
    <form class="form-inline"> 
     <button type="button color" onclick="document.getElementById('magic').innerHTML='clicked broken button'">Broken Button</button> 
     <button type="button"  onclick="document.getElementById('magic').innerHTML='clicked button'"  >Button</button> 
    </form> 
    <p id="magic"></p> 
</body> 
</html>

보시다시피 첫 번째 버튼은 잘못된 유형이며 두 번째 버튼은 올바른 유형입니다. 두 버튼 모두 거의 동일한 onclick 핸들러를 가지고 있지만 단 한 가지 차이점은 변경된 단락의 텍스트뿐입니다.

첫 번째 단추를 클릭하면 단락의 텍스트가 변경되고 전체 페이지가 다시로드되므로 결과가 빈 단락이됩니다. 두 번째 버튼을 클릭하면 모든 것이 예상대로 작동하고 단락의 텍스트가 변경되어 다시로드되지 않습니다.

그래서 모든 4 개의 주요 브라우저에서 전체 페이지를 다시로드하는 것이 기본 동작인지 말해 줄 수 있습니까? 브라우저가 누락 된 버튼에 대한 힌트를 만들어서는 안됩니다 (개발자 콘솔 로그에 오류 메시지를 인쇄하는 등). 나에게 이것은 매우 혼란 :(그들이 <form> 내부이기 때문에

출처

2013-03-28 Jonas

button 요소의 type 속성의 기본 값은,417입니다. 즉, 해당 요소를 클릭하면 onclick 이벤트 처리기가 먼저 실행 된 다음 처리기가 처리하지 않으면 양식이 전송됩니다. 실제로는 action 속성의 form 요소가 페이지의 URL로 기본 설정되어 있으므로이 경우 페이지가 다시로드됩니다.

코드에서 type="button color"은 구문 오류가 있으며 무시됩니다. 따라서 기본값은 type=submit입니다. 속성 지정 type="button"은 정확하고 button 요소를 "순수 버튼"으로 만들며 클릭하면 스크립트 효과 만 있고 양식은 제출되지 않습니다.

button 개의 요소를 특수한 스타일로 지정하려면 class 속성을 사용하십시오 (예 : button). <button type="button" class="color">. type 속성은 제한된 키워드 집합 만 값으로 사용하며 각 키워드는 고정 된 의미를가집니다.

출처

2013-03-28 11:56:55

답변 해 주셔서 감사합니다! 나는 이것이 어떤 명세로 기록 되었으면 좋겠다 ... 잘못된 버튼은 나만 쓰여진 것이 아니므로, 브라우저가 다시로드되는 이유를 알아 내는데 몇 시간이 걸렸다. – Jonas

귀하의 버튼을 눌러 페이지를 다시로드, 그래서 그 양식이 제출되는 경우 역할을합니다.

최종 첫 onclick에 return false;를 추가합니다. 트릭을 할해야

<form class="form-inline"> 
    <button type="button color" onclick="document.getElementById('magic').innerHTML='clicked broken button'; return false;">Broken Button</button> 
    <button type="button"  onclick="document.getElementById('magic').innerHTML='clicked button';"  >Button</button> 
</form>

출처

2013-03-28 10:51:44 Xenolithic

빠른 답장을 보내 주셔서 감사합니다. 그러나 제 질문에 대한 답변에 더 많은 관심을 가지고 있습니다 :) 그리고 두 번째 버튼을 클릭 한 후 브라우저가 다시로드되지 않는 이유는 무엇입니까? – Jonas

정말 대단히 죄송합니다. 질문을 완전히 잘못 읽었습니다. 나는 솔직히 단서가 없다! ._. – Xenolithic

내가 추측해야만한다면 - 잘못된 형식의 특성 때문에 브라우저는 단추의 기본 동작으로 처리 할 것입니다. 이는 단추가 들어있는 양식을 제출하고 올바른 특성이 'onclick' 핸들러. – Xenolithic

크롬, FF, IE 및 오페라의 입력에 이상한 동작이 입력되었습니다.

답변

관련 문제