课程咨询 :186-8884-0703
课程咨询qq:3390509615

深圳Web培训 > 达内新闻 > Web前端教程——WEB常见错误(含解决方法)
  • Web前端教程——WEB常见错误(含解决方法)

    发布:深圳Web培训      来源:达内新闻      时间:2016-01-27

  • 我是那种脾气暴躁的web用户,但我认为正是如此才驱使我成为一名良好的web开发人员。我会对那些会导致使用网站变得困难的事情恼火,我认为事情越简单越方便越好。这里有五个常见的可用性错误,以及如何避免它们的解决方案。

    使用submit 代替 click 事件;使用标签!

    Web前端教程——WEB常见错误(含解决方法)

    我自己也不知道有多少次我曾试着用 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 ew tab

    e.preventDefault();

    });

    不要让你的用户在你的网站上玩点击后退点击后退的游戏!

    给带有text-overflow: ellipsis的元素添加标题属性

    新的CSS text-overflow: ellipsis属性和值真不错。开发人员习惯于排除万难地复制这种效果。我完全赞成使用text-overflow: ellipsis,但如果我将鼠标悬停于使用它的元素上,你最好抛出一个title属性,这样我才可以很快地看到整个文本:

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

    如果你不希望两次输出内容,你可以用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培训

上一篇:WEB前端学习宝典——WEB前端学习误区

下一篇:程序员如何修得大乘境界

最新开班日期  |  更多

WEB前端工程师--全日制班

WEB前端工程师--全日制班

开班日期:3月31日

WEB培训前端工程师--周末班

WEB培训前端工程师--周末班

开班日期:3月31日

WEB培训免费训练营一期

WEB培训免费训练营一期

开班日期:3月31日

WEB培训免费训练营二期

WEB培训免费训练营二期

开班日期:3月31日

  • 地址:深圳市福田区八卦四路华晟达(原南方苑)大厦4楼东—深圳WEB开发培训中心
  • 课程培训电话:186-8884-0703
    课程咨询qq:3390509615     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56