在使用jQuery進行表單驗證的時候,我們可能會遇到一個問題——輸入框的光標在驗證失敗后會被自動移動到輸入框的開頭位置,這樣會給用戶帶來不便。所以,我們需要找到一種方法,在驗證失敗后仍然保持輸入框光標位置不變。
$('form').submit(function () { var input = $('#input'); if (input.val() === '') { alert('輸入不能為空!'); input.focus(); return false; } //do something... });
在上面的代碼中,我們通過判斷輸入框是否為空來進行表單驗證,如果為空就彈出警告框,并讓光標自動聚焦到輸入框。
不過,當我們在輸入框中輸入了一些內容,然后將光標移到中間或者末尾位置,再刪除部分內容導致輸入框為空后,表單驗證就會失敗并把光標移動到輸入框的開頭位置。
那么,我們應該怎樣保持輸入框光標位置不變呢?
$('form').submit(function () { var input = $('#input'); if (input.val() === '') { alert('輸入不能為空!'); setTimeout(function () { input.focus(); }, 0); return false; } //do something... });
我們只需要將光標自動聚焦到輸入框的操作放到一個定時器里,再將定時器的延遲時間設置為0毫秒即可。
這樣,當表單驗證失敗時,輸入框的光標位置就會被保持不變,讓用戶更加方便地進行下一步操作。