제안 개발 요약 및 키보드 이벤트 요약(중국어 입력기 현황)_javascript 기술

重要的键盘事件：
事件顺序：keydown -> keypress ->keyup
对于输入法开启时：
keypress：
这三个事件中最最特别的事件的说,如果巧妙运用可以事半功倍：
1. 首先对于大部分功能键是没有keypress事件的
Caps lock ，shift，alt，ctrl，num lock、、、庆幸的是enter拥有此事件
2. 对于字母，数字，press返回的keyCode是不可靠的
在IE和webkit 下 返回的是ASCII code
firfox下永远返回0
但是 对于keyUP keyDOWN事件 键值是完全统一的
3. KeyPress 只能捕获单个字符
KeyDown 和KeyUp可以捕获组合键。故可能涉及组合键的功能需要绑定在down up事件上
对于中文输入法开启时个浏览器对事件的不同相应以及解决方法：
在中文输入法开启状态下：
Firefox：当点击字母键时，会触发这样的事情：

     为什么叫做虚拟失焦呢： 这种状态下并未真正触发失焦状态，但是却屏蔽了所有输入框绑定的键盘事件     

        IE，webkit ： 但用户点击字母键，又会发生这样的事情

          

 

启发： 由于在这种状态下 是可以捕捉keyup,keydown从而捕捉KEYCODE的，前端可以通过模拟KEYCODE入输入框实现输入法与输入框的同步状态，并触发在输入状态时便同步suggestion。

그렇다면 입력 방법이 실행되는 동안 사용자가 Enter 키를 눌렀을 때 Enter 키의 원래 이벤트가 트리거되는 것을 방지하는 방법은 무엇입니까?
위의 두 그림을 보면 매우 간단합니다---------keyPress 이벤트는 검색 트리거 등 원래 이벤트에 바인딩됩니다.
keyup은 입력 방법이 실행될 때 바인딩됩니다. , Enter 누르기, 트리거되어야 하는 공백 및 기타 이벤트를 사용하여 검색 상자 종료를 감지할 수도 있습니다.

그러면 사용자 입력 후 지점을 어떻게 감지합니까?
이전 질문에서 결정한 keyUP 이벤트와 협력하여 입력 방법이 나타날 때 이벤트를 차단해야 하는 경우에는 keypress 이벤트에 바인딩하면 됩니다.
제안 요약:
처음부터 시작해 보겠습니다.
제안 개발에서 가장 큰 장애물은 사용자 행동을 확인하는 것인데, 이러한 사용자 행동은 주로 작은 입력 상자에 집중됩니다. 키보드 이벤트를 영리하게 사용하면 코드의 양을 줄일 수 있습니다. 성능을 향상하고 사용자 경험을 최대한 최적화합니다.

주요 사용자 행동을 정리하면 다음과 같습니다.
1. 입력 내용 변경(추가, 삭제, 붙여넣기) - 가장 중요한 것은 지속적인 입력입니다
2 .기능 키를 탭하세요. 기본 키 값은 다음과 같습니다.
keyCode: 13--Enter 키
keyCode: 27--esc 키
keyCode: 38--위쪽 방향 키-->webkit 커널 자동으로 헤더를 찾으니, PreventDefault를 기억하세요~
keyCode: 40 --아래쪽 화살표 키
또한 개발 중에 몇 가지 사소한 문제와 우회가 발생했습니다.
우선, 이념적 관점에서 요약:
1. 잘못된 생각:
하나: 사용자가 키보드를 탭할 때마다 요청을 보냅니다.
이것은 의심할 여지 없이 가장 간단한 방법이지만 많은 작업이 필요합니다. AJAX이며 대부분 표시할 기회가 없다면 좋은 프런트엔드 코드는 프런트엔드와 백엔드 상호 작용의 낭비를 충분히 고려하여 낭비를 최소화해야 합니다.
둘: 가끔씩 입력 상자의 내용을 감지합니다.
가끔씩 코드를 실행합니다. 이는 성능 낭비입니다. 가장 중요한 것은 이 메커니즘이 사용자 입력을 잘 제어할 수 없다는 것입니다. .이벤트 순서 및 js 감지
사용자 입력 후 정확하게 감지가 완료되면 오류가 발생합니다. 현재 입력 상자 상태를 감지하여 보상할 수 있지만 경험이 매우 열악하고 많은 Ajax 요청이 낭비됩니다.
2． 최적화 아이디어:
키 노크 이벤트 후 바인딩
첫 번째 방법이 개발된 후 셀프 테스트를 진행하는 동안 사용자 행동의 타임스탬프를 정확하게 모니터링할 수 없어 많은 문제가 발생한다는 사실을 발견했습니다. 버그를 하나씩 수정하다 보니 더 좋은 아이디어가 싹텄습니다.
키 탭 이벤트를 감지하여 요청을 보낼지 여부를 결정하고 연속 탭 이벤트를 차단합니다.
구체적인 아이디어:
사용자가 입력 상자에 집중하면 keydown 이벤트 모니터링을 시작하고 이때 keydown 이벤트가 있고 입력 상자가 변경될 수 있는 경우 - "감지합니다. 100ms 후 현재 입력 상자 상태가 이전과 일치하지 않으면 백엔드에 AJAX 요청을 보낼 수 있습니다
이렇게 사용자의 입력 및 입력 빈도에 따라 Ajax 요청 횟수는 결정되고 ajax 요청은 임계값 제한을 통해 감소됩니다. 사용자가 많이 입력할수록 js가 더 많이 감지되고, 사용자가 움직이지 않으면 js 감지가 되지 않고, 사용자가 천천히 입력하면 적게 감지되므로 낭비가 크게 줄어듭니다. .