程式設計師在頁面友善性上常犯的5種錯誤以及改正方法

程式設計師在頁面友善性上常犯的5種錯誤以及改正方法:

我是一個性情乖戾的web用戶，但我想這也幫助促使我成為了一名優秀的web開發人員。當我看到一個網站上有讓人不爽的設計時就會非常的惱怒，為什麼一些很簡單的東西做不好？以下是5種常見的可用性方面的錯誤，以及如何修正這些問題的方法。給自己方便，也與人方便，確保自己不要犯這樣的錯誤。

使用表達submit事件，不要用click事件；請用表單標籤form!

我不知道遇到過多少次，當我使用回車鍵提交一個表單時(或手機上用箭頭/輸入鍵)，卻什麼都沒發生。我只好再用滑鼠點擊提交按鈕，表單終於有了反應。這是我最痛恨的一個網頁可用性上的問題，一看就是業餘人員做的。用滑鼠點擊提交按鈕，或在手機上關閉鍵盤然後滾動到頁面底部找到提交按鈕，這都是討厭的多餘的動作，完全不需要這樣做。你只要使用submit事件，網頁就會變得友善很多：

document.getElementById("myForm").addEventListener("submit",function(e) {

       e.preventDefault ();

       // ... Do processing here.  Yay for "enter" key submission!

       return 🎜>如果你在哪裡犯了這樣的錯誤，請立即糾正。

不要阻止當有[CONTROL]或[META] 鍵按下時的點擊事件

我是一個非常喜歡在瀏覽器新標籤頁裡打開網頁的人，我最近在找一個新房子，我會同時打開很多網站頁面，點擊裡面的圖片觀看，但不幸的是，打開的這些頁面都進入了同一個標籤頁。很討厭。在你對任何連結使用preventDefault方法之前，請先檢查使用者是否按下了[CONTROL] 或[META] 鍵：

document.getElementById("myLink").addEventListener("click",function( e) {

       // e.preventDefault();  (不好)

       if(e.meta || e.ctrlKey) return; // 如果使用者想新開一個視窗，請放行

       e.preventDefault();

});

我在我的網站上就是這樣做的，使用者在開啟新標籤頁時就不會遇到類似的問題。不要迫使你的用戶在你的網站上不停的點擊後退鍵！

在設定text-overflow:ellipsis的時候，請在你的網頁元素上加入title屬性，

有些新的CSS屬性或屬性值是非常有用，例如text-overflow : ellipsis。程式設計師以前經常會使用什麼方法來實現這種效果。我同意使用text-overflow: ellipsis，但是，當我用滑鼠懸停在這個元素上時，你最好用title屬性顯示完整的資訊：

I am somereally, really long text that's going to be ellipsized

不要忘了:focus和 :active！

很多人在為頁面元素設計樣式時忽略了它們的狀態，只考慮了使用者使用滑鼠操作，忘記了使用者也許是用鍵盤操作。請用:focus 和:active 標示它們的狀態：

a:hover,a:active, a:focus { /* 改變它們的樣式*/

       color: #900;

}

給使用者做一件好事吧：下次當你開發一個網站，請用tab鍵遍歷頁面上所有的元素；如果你按動tab不鍵後，頁面沒有任何聚焦點變化，請檢查你的樣式表，看看是否忘了為它們添加一些狀態樣式！

請使用search/email文字方塊類型

當在手機或平板等行動裝置上填充表單資訊時，我遇到了超級麻煩的問題，因為我必須切換鍵盤模式才能找到“@”字元。我希望Web開發人員都能成熟點，學會使用正確的文字方塊類型：

稍微修改一下，就能為你的手機用戶帶來巨大的便捷。

我們程式設計師常犯的錯誤很多，以後我還會寫更多這方面的文章，但可以肯定的是，大多數的這些錯誤都很容易糾正，只要你注意到了它們。

免費領取LAMP兄弟連原創PHP影片教學光碟/《細說PHP》精要版，詳情諮詢官網客服：http://www.lampbrother.net

大家可以訂閱一下郵件，我會時不時的跟大家分享IT相關教學及書籍。

http://list.qq.com/cgi-bin/qf_invite?id=ea7d919ad263169bce2be53a3e16da0f0ec55ac36513c68e