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

php中文网

发布时间：2016-07-25 09:01:00

1170人浏览过

来源于php中文网

原创

程序员在页面友好性上常犯的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

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：PHP 图片文件上传的原理分析与代码下一篇：php mysql数据库类(php新手入门)

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问

阿里巴巴推出的全能AI助手

腾讯元宝

腾讯混元平台推出的AI助手

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

智谱清言 - 免费全能的AI助手

相关专题

TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者，系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例，帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

2026.02.25

Python数据处理流水线与ETL工程实战

本专题聚焦 Python 在数据工程场景下的实际应用，系统讲解 ETL 流程设计、数据抽取与清洗、批处理与增量处理方案，以及数据质量校验与异常处理机制。通过构建完整的数据处理流水线案例，帮助开发者掌握数据工程中的性能优化思路与工程化规范，为后续数据分析与机器学习提供稳定可靠的数据基础。

2026.02.25

Java领域驱动设计（DDD）与复杂业务建模实战

本专题围绕 Java 在复杂业务系统中的建模与架构设计展开，深入讲解领域驱动设计（DDD）的核心思想与落地实践。内容涵盖领域划分、聚合根设计、限界上下文、领域事件、贫血模型与充血模型对比，并结合实际业务案例，讲解如何在 Spring 体系中实现可演进的领域模型架构，帮助开发者应对复杂业务带来的系统演化挑战。

2026.02.25

Golang 生态工具与框架：扩展开发能力

《Golang 生态工具与框架》系统梳理 Go 语言在实际工程中的主流工具链与框架选型思路，涵盖 Web 框架、RPC 通信、依赖管理、测试工具、代码生成与项目结构设计等内容。通过真实项目场景解析不同工具的适用边界与组合方式，帮助开发者构建高效、可维护的 Go 工程体系，并提升团队协作与交付效率。

2026.02.24

Golang 性能优化专题：提升应用效率

《Golang 性能优化专题》聚焦 Go 应用在高并发与大规模服务中的性能问题，从 profiling、内存分配、Goroutine 调度、GC 机制到 I/O 与锁竞争逐层分析。结合真实案例讲解定位瓶颈的方法与优化策略，帮助开发者建立系统化性能调优思维，在保证代码可维护性的同时显著提升服务吞吐与稳定性。

2026.02.24