Web程式員常見的5個錯誤及解決方案

標籤：分享   css   ctr   key   email   錯誤   網站   切換   變化   

我是那種脾氣暴躁的web使用者，但我認為正是如此才驅使我成為一名良好的web開發人員。我會對那些會導致使用網站變得困難的事情惱火，我認為事情越簡單越方便越好。這裡有五個常見的可用性錯誤，以及如何避免它們的解決方案。

使用 submit 代替 click 事件；使用<Form>標籤！

我自己也不知道有多少次我曾試著用 ENTER 鍵（或移動方向/enter鍵）提交表格，然後卻什麼都沒發生。然後我點擊或使用提交按鈕，表格才肯做一些事情。這是我對可用性這個領域的問題中最不滿的一個。跳格到提交按鈕，關閉移動鍵盤並滾動到提交按鈕，完全是不需要存在的令人煩不勝煩的多餘步驟。因為只需使用submit，一切煩惱就煙消雲散：

document.getElementById("myForm").addEventListener("submit", function(e) {e.preventDefault();// ... Do processing here.  Yay for "enter" key submission!return false;});

如果你曾在任何地方犯下這一暴行，請立即修複它。

點擊事件：當[CONTROL]或 [META] 也按下的時候，不要阻止

最近我正在網上找新房子，我習慣於開啟一串新標籤。我看到一個列表頁面和命令點擊我想要瀏覽照片的幾幢房子，然後會被重新導向到在同一個標籤頁面：點擊監聽和window.location變化的受害者。在你在任何連結上使用preventDefault時，一定要檢查meta 和control 屬性：

document.getElementById("myLink").addEventListener("click", function(e) {// e.preventDefault();  (bad)if(e.meta || e.ctrlKey) return; // Don‘t block user if they want to open a new tabe.preventDefault();});

不要讓你的使用者在你的網站上玩點擊後退點擊後退的遊戲！

給帶有text-overflow: ellipsis的元素添加標題屬性

新的CSS text-overflow: ellipsis屬性和值真不錯。開發人員習慣於排除萬難地複製這種效果。我完全贊成使用text-overflow: ellipsis，但如果我將滑鼠移至上方於使用它的元素上，你最好拋出一個title屬性，這樣我才可以很快地看到整個文本：

<div class="ellipsizeMe" title="I am some really, really long text that‘s going to be ellipsized">I am some really, really long text that‘s going to be ellipsized</div>

如果你不希望兩次輸出內容，你可以用JS來動態地設定標題。不管你做什麼……請為你的使用者著想。

不要忘記 :focus和 :active！

很多人在樣式化元素和假設使用者有滑鼠的時候，忘記了這些聲明。還得使用:focus和:active聲明：

a:hover, a:active, a:focus { /* change _all_ the pseudos! */color: #900;}

請記住：下次你建立網站的時候，要給所有頁面添加tab鍵功能：如果你點擊tab鍵，卻不知道什麼元素會得到焦點，那就檢查你的樣式表，看看是否忘了添加這些聲明！

使用類型為search和email的input輸入框

當我嘔心瀝血地完成行動裝置上的表格時，卻因為不得不在鍵盤螢幕之間切換以得到一個“@”，而感受到了令人難以置信的沮喪。請務必使用正確的輸入類型：

<input type="search" value="" /><input type="email" value="" />

我們需要為移動使用者提供快速更新以及非常大的易用性。

但是，開發人員可能會犯數以百計的常見的可用性錯誤，因此期待以後會有更多關於可用性的文章。令人欣慰的是，大多數可用性問題糾正起來非常簡單，如果你閱讀了以上幾個可用性問題的話。如果你有任何關於有用性的問題和解決方案，也歡迎能和我們一起分享！

Web程式員常見的5個錯誤及解決方案