HTML5 캘린더 요소에서 날짜 선택을 감지하지만 수동으로 입력 한 날짜가 아님

사용자가 HTML5 캘린더 요소에서 날짜를 클릭 할 때 JavaScript 기능을 실행할 수 있어야합니다. 나는 onchange를 사용했지만, 그것은 또한 화재시 날짜에 사용자 유형 :HTML5 캘린더 요소에서 날짜 선택을 감지하지만 수동으로 입력 한 날짜가 아님

<input type="date" onchange="alert('fired');"/>

그들이 깔끔한이다 "완전한"날짜에 입력 할 때까지 이벤트가 발생하지 않는 것,하지만하지 않습니다 내 필요를 채워라.

캘린더에서 날짜를 클릭했을 때만 발동하는 방법이 있습니까? 또는 두 시나리오 모두에서 실행하지만 어떤 유형의 동작인지 감지 할 수 있습니까?

출처

2013-05-21 Ooklamok

사용자가 마우스를 사용하여 유효한 날짜 만 선택할 수 있도록 키보드 입력을 사용하지 않으려합니다.

또한 캘린더 내부의 클릭을 감지하려고합니다. 이를 위해

내가 대답이 업데이트 데모가 : 클릭 처리기가 잘못된 날짜에 클릭에 대한 빈 문자열 값이 어떻게

참고. 사용하지 않는 것이 좋습니다 HTML 속성에

InputDatePreventKeyboard

그 이벤트 핸들러 작성을 유의하시기 바랍니다.

<input type="date" 
    onchange="alert(window.event.type+' event handler for '+this.type+' noticed \''+this.value+'\'');" 
    onclick="alert(window.event.type+ ' event handler for '+this.type+ ' noticed \''+this.value+'\'');" 
    onkeydown="window.event.preventDefault(); 
alert(window.event.type+' event handler for '+this.type+' prevents keyboard input for value \''+this.value+'\'');" 
    onkeypress="window.event.preventDefault(); 
alert(window.event.type+' event handler for '+this.type+' prevents keyboard input for value \''+this.value+'\'');" 
    oninput="alert(window.event.type+' event handler for '+this.type+' noticed \''+this.value+'\'');" />

출처

2013-05-21 18:39:28 stackunderflow

불행하게도이 onchange를 같은 행동을 할 것 같다

여기 데모의 업데이트 된 코드는 https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval#Use_functions_instead_of_evaluating_snippets_of_code

를 참조하십시오. – Ooklamok

자세히 설명해주십시오. 네비게이터 란 무엇입니까? userAgent 정확한 문제는 무엇입니까? event.preventDefault()를 호출하는 onchange listener를 조합 해 보았습니다. 키보드 입력을 가로 채기 위해? – stackunderflow

업데이트 해 주셔서 감사합니다. 나는 정교하게 설명 할 것이다. 검색을 실행하기 위해 옆에 버튼이있는 날짜 입력 필드가 있습니다. 내가 원하는 것은 사용자가 날짜를 입력하면 검색 버튼을 클릭하여 날짜를 입력했음을 나타냅니다. 달력에서 날짜를 클릭하면 즉시 실행할 검색이 필요합니다. 문제는 onchange와 oninput 모두 사용자가 날짜의 마지막 부분을 입력 할 때 발생합니다. 날짜를 클릭했을 때만 입력 할 때 아무 것도 실행할 필요가 없습니다. – Ooklamok

HTML5 캘린더 요소에서 날짜 선택을 감지하지만 수동으로 입력 한 날짜가 아님

답변

관련 문제