web前端：程序员在页面友好性上常犯的5种错误以及改正方法

　　web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。

　　我是一个性情乖戾的Web用户，但我想这也帮助促使我成为了一名优秀的Web开发人员。当我看到一个网站上有让人不爽的设计时就会非常的恼怒，一些很简单的东西为什么做不好？下面是5种常见的可用性方面的错误，以及如何纠正这些问题的方法。给自己方便，也与人方便，确保自己不要犯这样的错误。

　　使用表达submit事件，不要用click事件；请用表单标签form!

　　我不知道遇到过多少次，当我使用回车键提交一个表单时(或手机上用箭头/输入键)，却什么都没发生。我只好又用鼠标点击提交按钮，表单终于有了反应。这是我最痛恨的一个网页可用性上的问题，一看就是业余人员做的。用鼠标点击提交按钮，或在手机上关闭键盘然后滚动到页面底部找到提交按钮，这都是讨厌的多余的动作，完全不需要这样做。你只需要使用submit事件，网页就会变得友好很多：

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

　　e.preventDefault();

　　//...Doprocessinghere.Yayfor"enter"keysubmission!

　　returnfalse;

　　});

　　如果你在什么地方犯了这样的错误，请立即纠正。

　　不要阻止当有[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属性显示出完整的信息：

　　<divclass="ellipsizeMelazy"title="Iamsomereally,reallylongtextthat'sgoingtobeellipsized">

　　Iamsomereally,reallylongtextthat'sgoingtobeellipsized

　　</div>

　　如果你不想把相同的内容输出两次，你可以使用Js动态的设置title。不管怎么实现，请为用户着想。

　　不要忘了:focus和:active！

　　很多人在给页面元素设计样式时忽略了它们的状态，只考虑了用户使用鼠标操作，忘记了用户也许是用键盘操作。请用:focus和:active标明它们的状态：

　　a:hover,a:active,a:focus{/*改变它们的样式*/

　　color:#900;

　　}

　　给用户做一件好事吧：下次当你开发一个网站，请用tab键遍历页面上所有的元素；如果你按动tab不键后，页面没有任何聚焦点变化，请检查你的样式表，看看是否忘了给它们添加一些状态样式！

　　请使用search/email文本框类型

　　当在手机或平板等移动设备上填充表单信息时，我遇到了超级麻烦的问题，因为我必须切换键盘模式才能找到“@”字符。我希望Web开发人员都能成熟点，学会使用正确的文本框类型：

　　<inputtype="search"value=""/>

　　<inputtype="email"value=""/>

　　稍微修改一下，就能给你的手机用户带来巨大的便捷。

　　我们程序员常犯的错误有很多，以后我还会写更多这方面的文章，但可以肯定的是，大多数的这些错误都很容易纠正，只要你注意到了它们。如果你在使用某个网站或web应用时还遇到了其它友好性的问题，请告诉我，我会在下一篇文章里写出来，谢谢！

　　前端开发领域有很多自学的同行，但是后面的学习曲线越来越陡峭，每前进一步都很难。

　　另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术不时闪现出来，例如HTML5、CSS3、Javascript、负边距布局、栅格布局等;各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力;浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。为了满足"高可维护性"的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。