텍스트 상자 안에 입력을 누르면 Firefox에서 제출 버튼의 이벤트를 클릭하는 이벤트가 발생하지 않습니다.

StackOverflow https://stackoverflow.com/questions/1642815

문제

이 HTML 페이지가 매우 간단합니다. 텍스트 상자와 제출 버튼이 포함되어 있습니다. 원하는 것은 텍스트 상자에 무언가를 입력하고 버튼의 on 클릭 이벤트에서 기능을 입력 할 때입니다. IE와 Google Chrome에서 작동하지만 Firefox에서는 작동하지 않습니다. 이것은 Firefox의 정상적인 동작입니까, 아니면 여기에 빠진 것이 있습니까?

<html>
<head>
<script language="javascript">
function callMe()
{
   alert("You entered: " + document.getElementById("txt").value);
}
</script>
</head>
<body>
<input type="text" id="txt" />
<input type="submit" value="Submit" onclick="callMe()" />
</body>
</html>
도움이 되었습니까?

해결책

로부터 설명에 대한 설명 onclick 이벤트:

그만큼 onclick 포인팅 장치 버튼을 요소 위로 클릭하면 이벤트가 발생합니다. 이 속성은 대부분의 요소와 함께 사용될 수 있습니다.

UA가 언제에도 그러한 이벤트를 생성해야한다는 보장은 없습니다. ~ 아니다 포인팅 장치를 사용하고 무언가를 클릭합니다.

당신은 아마도 원합니다 onsubmit 양식의 이벤트 :

그만큼 onsubmit 이벤트는 양식이 제출 될 때 발생합니다. 그것은 만에만 적용됩니다 FORM 요소.

그러나 텍스트 필드와 버튼 주위에 양식을 랩핑해야합니다.

<html>
  <head>
    <script language="javascript">
      function callMe()
      {
        alert("You entered: " + document.getElementById("txt").value);
      }
    </script>
  </head>
  <body>
    <form onsubmit="callMe()" action="#">
      <input type="text" id="txt" />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

다른 팁

OnSubmit과 함께 양식을 추가 해보십시오 - 이것은 작동해야합니다 (FF 3.5로 테스트) :

<html>
<head>
<script language="javascript">
function callMe()
{
   alert("You entered: " + document.getElementById("txt").value);
}
</script>
</head>
<body>
<form onsubmit="callMe()">
<input type="text" id="txt" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

처음에 편집 상황을 오해하고 다른 답변을 게시했습니다.

크롬에서는 작동하지 않습니다 (4.0.223.11).

문제는 치료의 차이입니다u003Cinput> s가없는 su003Cform> - 동봉을 추가하는 경우u003Cform> 요하네스 로스 셀 (Johannes Rössel)이 권장하는 것처럼 요소, onclick 요소가 발사됩니다 (onclick 요소는 대신 양식의 제출 처리기를 대신 사용해야합니다.

편집은 html5에 대한 메모를 추가했습니다

주목하십시오 HTML5 사양은 제출 버튼에서 클릭 이벤트를 발송하는 것을 언급합니다.:

사용자 에이전트는 각 양식의 버튼을 양식의 기본 버튼으로 설정할 수 있습니다. 이것은 양식 소유자가 양식 요소 인 트리 순서의 첫 번째 제출 버튼이어야하지만 사용자 에이전트는 플랫폼에 다른 사람이 더 적합한 경우 다른 버튼을 선택할 수 있습니다. 플랫폼이 사용자가 암시 적으로 양식을 제출할 수 있도록 지원하는 경우 (예를 들어, 텍스트 필드가 암시 적으로 집중되는 동안 "ENTER"키를 누르는 일부 플랫폼에서 형식을 제출하는 경우) 양식의 기본 버튼의 활성화 동작이 발생해야합니다. , 달리기.

입력 기반 활성화 구현이 필요하지 않으며 (데스크탑 브라우저에서 구현되었지만) 입력이 양식의 일부일 때 "활성화 방법"(클릭 이벤트)을 사용할 수 있습니다 ( "양식 소유자가 있습니다". ). "양식 소유자"의 정의는u003Cform> 부모 또는 a form 기인하다.

이 결정으로 이어진 토론은 보이지 않으므로 질문이 있으면 사양에 대해 논의되는 공개 HTML 메일 링리스트에 문의 할 수 있습니다.

내가 아는 한, 당신은 '텍스트 상자'내부에서 'onclick'을 호출 할 수 없습니다. 텍스트 상자 외부에 있어야합니다.

텍스트 상자에 텍스트를 입력하면 왼쪽 마우스가 페이지의 다른 곳에서 클릭 한 다음 Enter를 누르면 Onclick 이벤트가 충분히 작동합니다.

주변의 작업을 찾으면 알려주십시오.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top