|
程序员在页面友好性上常犯的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 false;
});
如果你在什么地方犯了这样的错误，请立即纠正。
不要阻止当有[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
如果你不想把相同的内容输出两次，你可以使用Js动态的设置title。不管怎么实现，请为用户着想。
不要忘了: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 |
0
0
程序员在页面友好性上常犯的5种错误以及改正方法
php中文网
发布时间：2016-07-25 09:01:00
|1170人浏览过
|来源于php中文网
原创
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
不受国内限制的浏览器大全
想找真正自由、无限制的上网体验？本合集精选2025年最开放、隐私强、访问无阻的浏览器App，涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问，部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制，总有一款适合你！
41
2025.12.31
html5怎么播放视频
想让网页流畅播放视频？本合集详解HTML5视频播放核心方法！涵盖<video>标签基础用法、多格式兼容（MP4/WebM/OGV）、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件，纯前端实现高清视频嵌入，助你快速打造现代化网页视频体验。
9
2025.12.31
html5怎么使用
想快速上手HTML5开发？本合集为你整理最实用的HTML5使用指南！涵盖HTML5基础语法、主流框架（如Bootstrap、Vue、React）集成方法，以及无需安装、直接在线编辑运行的平台推荐（如CodePen、JSFiddle）。无论你是新手还是进阶开发者，都能轻松掌握HTML5网页制作、响应式布局与交互功能开发，零配置开启高效前端编程之旅！
2
2025.12.31
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章
