머리말
최근에 제품은 많은 입력 상자를 만들어야합니다. 제품이 원하는 대화식 효과는 다음과 같습니다. 사용자는 중국어와 영어를 입력 할 수 있으며 사용자 입력이 들어 오면 입력 한 문자 수는 실시간으로 표시 될 수 있습니다. 수량 제한이 한계를 초과하면 입력 상자 테두리가 빨간색으로 바뀌고 사용자에게 정보가 표시됩니다.
이 상호 작용은 문제가없는 것처럼 들리며 기술 구현에 어려움이없는 것 같습니다. 그러나 내가 그것을 깨달았을 때, 나는 중국 입력 방법을 발견하고 함정이 있음을 발견했습니다.
트릭이 얼마나 트릭, 아래에서 보자 ~~
입력 상자의 컨텐츠 길이를 실시간으로 모니터링하면 피트가 발생하여 oninput 이벤트를 모니터링하는 데 사용됩니다.
이 oninput 이벤트를 사용하면 두 가지 이점이 있습니다.
사용자가 마우스 오른쪽 버튼으로 입력 상자의 내용을 변경하면들을 수 있습니다.
이 이벤트는 입력 상자의 내용이 변경 될 때만 트리거됩니다. 예를 들어,이 이벤트는 사용자가 화살표 키, control / shift 등과 같은 제어 문자 키를 누르면 트리거되지 않습니다.
영어 캐릭터 나 숫자를 입력 할 때, 심지어正常输入中文때도 효과가 완벽합니다. 그러나非正常输入中文하면 버그가 발생합니다. 비정상 입력은 어떻습니까? 다음 예제 그림을 참조하십시오.
당신은 그것을 보셨습니까? 이 중국 입력 방법에서 사용자는 입력하려는 중국인에 입력하지 않았지만 몇 개의 Pinyin을 입력했지만 input 이벤트가 트리거되었으며, 듣는 입력 상자 value 실제로 Pinyin 문자뿐만 아니라 분리 d'd'd 지점도 있습니다. 입력 상자 컨텐츠의 길이가 5 개 이하로 제한되면 스크린 샷의 경우 사용자는字符长度超过限制！ . 물론, 그러한 대화식 효과는 제품이 원하는 것이 아닙니다.
onkeydown / onkeypress / onkeyup 이벤트를 사용하여 들으십시오
이러한 이벤트의 단점은 오른쪽 클릭에서 복사 된 입력 컨텐츠를들을 수 없지만 input 이벤트와 동일한 문제가 있습니까?
나는 몇 가지 실험을 수행했고 keydown 과 keyup input 과 동일한 문제에 직면한다는 것을 발견했지만 keypress 중국 입력 상태에서 keypress 트리거되지 않을뿐만 아니라 Pinyin에 들어가는 과정에서 트리거되지 않을뿐만 아니라 "올바른, 제대로"와 같이 입력하려는 중국어를 선택한 후에 트리거되지 않을 것입니다. 그런 다음 "오른쪽, 오른쪽, 오른쪽"이 입력되면 문자 한계가 초과되지만字符长度超过限制！ 팁.
타협 솔루션
컨텐츠 길이를 실시간으로 모니터링하고 중국 입력 방법에 버그가 없도록하기 위해 오랫동안 고군분투 해 왔으며 마침내 할 수 없다는 것을 알았습니다! (영웅이 발견되면 ~~를 말 해주세요).
따라서 결국 사용자 경험이 희생되고 타협이 발견되었습니다. 입력 상자는 초점을 blur 거나 입력 키가 입력 될 때만 콘텐츠 길이 만 확인했습니다. 물론 입력 상자의 내용이 한계를 초과한다는 것을 알게되면 사용자 수정을 용이하게하기 위해 입력 상자에 커서를 유지해야합니다.
아아,用户输入回车键时才进行内容长度的检测하고 이전에 심은 함정이 확인됩니다.
입력 상자에 Enter 키가 입력되었는지 감지하는 방법
사실, 이것은 매우 일반적인 상호 작용입니다. 예를 들어, 이름을 수정할 때, 캐리지를 입력 한 후 직접 입력하고 저장하도록 지원하며 로그인 할 때 캐리지를 입력 한 후 직접 입력하고 로그인하도록 지원합니다. 그러나주의해야 할 함정은 : **中文输入法下按回车键来输入英文字符** .
중국 입력 방법에 따라 ENTER 키를 누르는 과정의 예 : 영어 문자를 입력하십시오.
예를 들어, 로그인하기 위해 계정을 입력하려면 내 계정이 모든 영어로됩니다. 나는 현재 중국 입력 방법에 있지만 입력 방법을 전환하기에는 너무 게으르기 때문에 내 계정 (모든 영어 문자)을 직접 입력했습니다. 현재 Sogou 입력 방법으로 인해 많은 중국어 문자열을 촉발 한 다음 Enter를 누르고 입력 상자에 내가 원하는 영어 문자에 들어갔다.
이 경우 사용자가 Enter 키를 입력했지만 사용자는 Enter 키를 눌러 중국 입력 방법에 따라 영어 문자를 입력했습니다. 이 Enter 키는 모니터링하려는 Enter 키가 아닙니다. 그렇다면이 경우 Enter 키를 배제하는 방법은 무엇입니까?
일반적으로 Enter 키를들을 때 keydown 이벤트 또는 keyup 이벤트를 사용하며 구현 코드는 다음과 같습니다. 두 가지 방법 모두 듣고 싶지 않은 엔터테이션 키를 걸러 낼 수 있습니까?
// 메소드 1 : KeyDown event endit.onkeydown = function (e) {if (e.keyCode == 13) {// 사용자가 enter 키를 입력합니다. key // dos relate operations}} // 메소드 2 : keyup event input.onkeyup = function (e) {if (e.keycode == 13) {// etern relation interats}} 실험 후 keydown 사용하면 성공적으로 필터링 될 수 있지만 keyup 사용할 수는 없습니다.
그럼 이유를 봅시다?
이는 keydown 이벤트에서 : 중국 입력 메소드 상태에 입력 된 키 Enter keyCode 13 대신 229 입니다. 단순히 리턴을 입력하면 keyCode 13 입니다.
keyup 이벤트에서 : 중국 입력 메소드 상태에서 Enter 키를 입력하여 감지 된 keyCode 13 입니다. 단순히 입력을 입력하면 keyCode 도 13 입니다.
다음 그림은 콘솔에 인쇄 한 결과입니다. (코드 예제는 여기를 참조하십시오)
결론
입력 상자와 관련된 여러 이벤트 : Keydown/keyup/keypress/입력/변경
//www.vevb.com/article/21237.htm을 참조하십시오