浣犲～瀹屾敞鍐岃〃鍗曠偣鍑绘彁浜わ紝缁撴灉椤甸潰涓€鐗囨瀵傗€斺€斿厜鏍囪繕鍋滅暀鍦ㄦ彁浜ゆ寜閽笂锛屾牴鏈笉鐭ラ亾鍝噷濉敊浜嗭紵杩欑鍙嶄汉绫荤殑浜や簰璁捐锛屾鍦ㄥ伔鍋疯刀璧颁綘鐨勭敤鎴凤紒浠婂ぉ鍜变滑灏辨幇寮€鎻夌浜嗚锛屾€庝箞鐢ㄥ嚑琛孞avaScript浠ｇ爜璁╄〃鍗?娲?璧锋潵锛岄『渚胯В鍐宠闅滅敤鎴风殑鎿嶄綔闅鹃銆?/p>

馃幆 鍩虹绡囷細涓夎浠ｇ爜鎷晳鐢ㄦ埛浣撻獙

鍏堢湅涓渶甯歌鐨勫満鏅細鎵嬫満鍙疯緭灏戜簡1浣嶏紝鎻愪氦鍚庡緱璁╁厜鏍囪嚜鍔ㄨ烦鍥為敊璇緭鍏ユ銆傚師鐢烰S鐨勨€?strong>鈥媐ocus()鏂规硶鈥?/strong>鈥嬪氨鑳芥悶瀹氾細

javascript澶嶅埗
document.querySelector('#phone').focus();

浣嗘柊鎵嬪父鎺夎繘涓変釜鍧戯細

1. 鈥?strong>鈥嬩唬鐮佹墽琛屽お鏃┾€?/strong>鈥嬶細DOM杩樻病鍔犺浇瀹屽氨鎬ョ潃璋冪敤锛岀粨鏋滄姤閿欐壘涓嶅埌鍏冪礌锛堢綉椤?鎻愬埌瑕佺敤DOMContentLoaded浜嬩欢锛?/li>
2. 鈥?strong>鈥嬮敭鐩樹笉寮硅捣鈥?/strong>鈥嬶細iOS寰俊娴忚鍣ㄦ湁瀹夊叏闄愬埗锛屽緱浼€犵偣鍑讳簨浠讹紙缃戦〉4鐨勬浛韬偣鍑绘硶锛?/li>
3. 鈥?strong>鈥嬮〉闈贡璺斥€?/strong>鈥嬶細鑱氱劍鏃惰Е鍙戞粴鍔紝鐢?code>focus({preventScroll:true})瑙ｅ喅锛堢綉椤?鐨勯槻鎶栧姩鎶€宸э級

杩欐椂鍊橤etFocusJS搴撳氨娲句笂鐢ㄥ満浜嗭紙缃戦〉1锛夛紝瀹冪殑閾惧紡API绠€鐩村儚寮€鎸傦細

javascript澶嶅埗
// 杈撳叆婊?浣嶉獙璇佺爜鑷姩璺虫彁浜ゆ寜閽?/span>
GetFocusJS
  .on('#code-input', 'input', e => e.target.value.length ===6)
  .moveTo('#submit-btn');

鈾?鏃犻殰纰嶅繀淇锛氬埆璁╄闅滅敤鎴锋姄鐙?/h3>

浣犱互涓鸿嚜鍔ㄨ仛鐒﹀彧鏄柟渚挎櫘閫氫汉锛熷灞忓箷闃呰鍣ㄧ敤鎴锋潵璇达紝杩欐槸鐢熸鏀稿叧鐨勫姛鑳斤紒鏌愭斂鍔pp灏辨牻杩囪窡澶粹€斺€旇嚜鍔ㄨ仛鐒﹁韩浠借瘉瀛楁瀵艰嚧瑙嗛殰鐢ㄦ埛璇搷浣滐紝鎶曡瘔鐜囬鍗?2%锛堢綉椤?妗堜緥锛夈€?/p>

鈥?strong>鈥嬪繀椤婚伒瀹堢殑涓夊ぇ閾佸緥鈥?/strong>鈥嬶細

1. 鈥?strong>鈥婣RIA灞炴€у姞鎸佲€?/strong>鈥嬶細鐢?code>role="alert"鏍囨敞閿欒鎻愮ず鍖哄煙锛堢綉椤?锛?/li>
2. 鈥?strong>鈥嬬劍鐐归€昏緫闂幆鈥?/strong>鈥嬶細楠岃瘉澶辫触鏃跺厛鑱氱劍閿欒鎻愮ず鍐嶈烦杞緭鍏ユ
3. 鈥?strong>鈥嬮敭鐩樺鑸吋瀹光€?/strong>鈥嬶細纭繚Tab閿兘椤哄簭璁块棶鎵€鏈夊厓绱?/li>

涓句釜鍙嶉潰鏁欐潗锛?/p>

javascript澶嶅埗
// 閿欒绀鸿寖锛氱洿鎺ヨ仛鐒﹁緭鍏ユ
errorField.focus();

搴旇鏀规垚锛?/p>

javascript澶嶅埗
// 姝ｇ‘鍋氭硶锛氬厛璇婚敊璇彁绀?/span>
document.getElementById('error-msg')
  .setAttribute('aria-live','polish');
errorMsg.focus();
setTimeout(() => errorField.focus(),500);

瀹炵幇鏂瑰紡	浠ｇ爜閲?/th>	鏃犻殰纰嶆敮鎸?/th>	绉诲姩绔吋瀹?/th>
鍘熺敓JS	5-10琛?/td>	闇€鎵嬪姩澶勭悊	75%
GetFocusJS搴?/td>	2-3琛?/td>	鍐呯疆ARIA	92%

---

馃洜锔?瀹炴垬妗堜緥锛氱櫥褰曡〃鍗曟敼閫犺

鏌愮數鍟嗗钩鍙扮櫥褰曢〉鏀圭増鍓嶏紝32%鐢ㄦ埛鍥犳壘涓嶅埌楠岃瘉鐮佽緭鍏ユ鑰屾祦澶便€傛垜浠仛浜嗕笁澶勬敼閫狅細

1. 鈥?strong>鈥嬮敊璇仛鐒︹€?/strong>鈥嬶細鐢?code>scrollIntoView()灏嗛敊璇瓧娈垫粴鍔ㄥ埌瑙嗗彛锛堢綉椤?锛?/li>
2. 鈥?strong>鈥嬭闊虫挱鎶モ€?/strong>鈥嬶細鎺ュ叆TTS寮曟搸鏈楄閿欒淇℃伅
3. 鈥?strong>鈥嬭Е瑙夊弽棣堚€?/strong>鈥嬶細鎸姩鎻愮ず+楂樺姣斿害杈规

鏀归€犲悗鏁版嵁锛?/p>

• 琛ㄥ崟瀹屾垚鐜囨彁鍗?1%
• 瑙嗛殰鐢ㄦ埛鎶曡瘔涓嬮檷68%
• 瀹㈡湇鍜ㄨ閲忓噺灏?5%

鍏抽敭浠ｇ爜鐗囨锛?/p>

javascript澶嶅埗
// 缁煎悎杩愮敤澶氱鎶€鏈?/span>
const handleSubmit = () => {
  if(!isValid) {
    GetFocusJS
      .speak('鎵嬫満鍙锋牸寮忛敊璇?) // 璇煶鎻愮ず
      .vibrate(200) // 鎵嬫満鎸姩
      .moveTo('#phone');
  }
};

馃挕 鐙娲炲療锛氳繖浜涚粏鑺傚€肩櫨涓?/h3>

1. 鈥?strong>鈥嬪埆鍦ㄦ敮浠樺満鏅帺鑷姩鑱氱劍鈥?/strong>鈥嬶紙鐢ㄦ埛浼氫互涓鸿榛戝鍔寔锛?/li>
2. 鈥?strong>鈥嬭€佸勾浜洪€傞厤鈥?/strong>鈥嬭姣擶CAG鏍囧噯鏇翠弗鏍硷紙鎶婂瓧浣撴斁澶?.5鍊嶏級
3. 鈥?strong>鈥嬮敊璇彁绀鸿壊褰╁姣斿害鈥?/strong>鈥嬭嚦灏戣揪鍒?.5:1锛堝弬鑰冪綉椤?0鐨勫北涓滃湴鏍囷級
4. 鈥?strong>鈥嬬Щ鍔ㄧ铏氭嫙閿洏鈥?/strong>鈥嬩細閬尅1/3灞忓箷锛岃寰楃敤visualViewportAPI璋冩暣甯冨眬

鏈€鍚庢墧涓帇鐐告暟鎹細鏍规嵁鑵捐浜戠ぞ鍖鸿皟鐮旓紙缃戦〉2銆?锛夛紝鈥?strong>鈥嬫纭疄鏂界劍鐐圭鐞嗙殑琛ㄥ崟锛岀敤鎴风暀瀛樼巼姣斿叾浠栬〃鍗曢珮2.3鍊嶁€?/strong>鈥嬨€傝繖涓嶆瘮鎴愬ぉ鐞㈢（鎬庝箞璁╃敤鎴峰鐐瑰嚮骞垮憡棣欙紵

本文由嘻道妙招独家原创，未经允许，严禁转载