입력 입력 상자_javascript 기술의 입력 이벤트에 대한 자세한 분석

1. 기본 사항: 이 분석의 원칙은 다양한 브라우저에서 입력 콘텐츠가 변경될 때 이벤트를 트리거하는 데 있어 다양한 비호환성입니다. IE에서는 onpropertychange 이벤트를 사용하고 다른 브라우저에서는 입력 이벤트를 사용합니다.
2. 사용 사례: 다음 상황에 대해 각 브라우저를 별도로 테스트합니다.
- 영문을 입력할 때 - 입력 방법을 열 때 - 대문자와 소문자가 다를 때 - ​연산자를 입력할 때 - 탭 키를 눌렀을 때 - 입력 방법을 눌렀을 때 스페이스를 눌렀을 때 – 컨트롤 키를 눌렀을 때 – 복사해서 붙여넣을 때 – 텍스트를 삭제할 때 – 등
3. 테스트 시작 : (특수한 경우만 표시되고, 표시되지 않은 경우는 정상 발동을 의미하며, 하나의 이벤트만 발생합니다. 매번 트리거됨)
chrome:
입력 방법이 켜져 있을 때 입력 이벤트를 캡처할 수 있습니다.
입력 방법이 켜져 있을 때 스페이스바를 누르면 두 가지 이벤트가 발생하는 것 같아요. 스페이스에 의해 발생하고 다른 하나는 입력 방법이 입력 상자를 변경할 때 발생합니다.
입력 방법이 켜져 있으면 스페이스 버튼을 누른 후 즉시 Caps Lock을 누르십시오. , 알 수 없는 이유로 모든 입력 이벤트가 두 번 실행됩니다.
입력 방법이 켜지지 않은 경우 방향 키는 이벤트를 실행하지 않지만 입력 방법을 켠 후에는 방향 키를 눌러 이벤트를 실행할 수 있습니다. 🎜> 잘라내기 및 붙여넣기 모두 이벤트를 트리거합니다. 탭 키는 이벤트를 트리거하지 않습니다. 입력 방법이 켜져 있을 때 탭 키를 누르면 이벤트가 트리거됩니다.
Shift 키와 기타 키를 길게 누르세요. ), 문자를 입력할 때마다 이벤트가 2번 발생합니다.
파이어폭스:
입력 방식을 켜면 이벤트를 캡쳐할 수 없지만 스페이스를 누르면 이벤트가 발생합니다.
화살표 키는 어떤 경우에도 이벤트를 실행하지 않습니다.
입력 방법이 켜져 있을 때 스페이스 버튼을 누른 후 즉시 Caps Lock이 눌러지면 모든 입력 이벤트가 두 번 실행됩니다. . 이유는 알 수 없습니다.
Firefox 페이지를 새로 고칠 때 내용은 입력 상자에 유지됩니다.
Shift 및 기타 키를 길게 누르세요. 예: 숫자 키), 입력된 각 문자에 대해 이벤트가 두 번 발생합니다. 이벤트
오페라:
일반적인 상황에서는 입력 상자에서 탭 키를 누르면 이벤트가 발생합니다. 이후에는 페이지가 새로 고쳐지지 않으며 탭 키를 눌러도 이 이벤트가 다시 발생하지 않습니다.
입력 방법을 켜세요. 이벤트가 켜진 후에는 방향 키나 탭 키를 눌러도 이벤트가 발생하지 않습니다.
입력 방식이 켜져 있을 때 스페이스 박스를 누르면 이벤트가 한 번만 발생하며, 두 번 발생하지 않습니다.
붙여넣기 이벤트가 발생하면 잘라내기 시에는 발생하지 않습니다. 예:
입력 방법은 이벤트를 실행하지 않습니다. 스페이스 버튼을 누르면 이벤트가 언제든지 실행되지 않습니다.
페이지를 새로 고칠 때 이벤트가 실행됩니다. 입력 내용을 유지하고 입력 내용이 비어 있는지 여부에 관계없이 페이지를 새로 고치면 이벤트가 자동으로 실행됩니다.
한 문장으로 보면 차이가 매우 큽니다. 🎜>입력 이벤트를 사용할 수 있다는 점에 유의하세요. Chrome, Firefox 및 Opera에서는 ontype이 아닌 addEventListener를 통해서만 바인딩할 수 있습니다. Onpropertychange는 on 또는 attachmentEvent를 사용하여 바인딩할 수 있습니다.

기타 온라인 데모 지침:
http: //www.jb51.net/tools/keyboard_events.html