致虚极 守静笃
网页前台制作，包括 javascript 与 HTML等。
实际上很久之前遇到过一回，结果最近开发又遇到这个Bug，而且也折腾了我一些时间，比如说我在利用Ajax提交表单后，需要重置表单各项内容从交互上来避免用户重复提交，正常的表单HTML结构如下所示：
<form action="" method="post" id="LoginForm"> <input type="text" name="username" value="" /> <input type="password" name="password" value="" /> <input type="submit" id="submit" name="submit" value="Login" /> <input type="reset" id="reset" name="reset" value="Reset" /> </form> |
在网页设计过程中经常会有一些容易被我们忽略的细节，大部分主流的浏览器会为我们提供一些形如自动完成、自动更正、自动大写、拼写检查、语音输入等人性化特性，但是并不是任何场景下我们都需要这些特性，比如对于电子邮件地址的输入，我们就不需要自动更正、自动大写、拼写检查等特性，而对于用户登录表单，为安全考虑则不希望自动完成的特性存在，今天要介绍的就是这些特性以及如何禁止这些特性的存在。
1. 自动完成（autocomplete）
大部分浏览器为了便于你下一次填写表单可能会有记忆功能或者又称为“自动完成”，形如下面的图示：
邮箱里垃圾邮件一直有很多，这让我不得不重新审视，发布在网页上的电子邮箱地址，为了避免垃圾邮件，我刻意将@更换成#，也许这在十年前是个不错的办法，但是随着神经网络和机器学习新算法的发展，这一类小手段也面临失效的风险，因为大部分都是通过修改电子邮箱地址的“@”符号，通过正则表达式筛选和特征值匹配，比如hotmail.com、gmail.com、163.com这一类疑似电子邮箱地址的特征，还是可以抓取到电子邮箱地址，所以在将Email发布到HTML网页之前我们要对其进行加密和混淆。
下面我以john@example.com为例，介绍几种加密和混淆的反垃圾邮件手段。
1. 生成图片
利用传统的图灵测试CAPTCHA，将防止采集的电子邮箱地址生成图片，利用机器不能识别的特性，来区别人和机器，生成图片的方式有很多，除了高大上的Photoshop外，甚至可以使用系统自带的绘图工具来完成，另外希望偷懒的话，还有一些在线工具可以帮助到你，比如《Top 10 Websites to Turn Your Email Address into An Image》。
某个项目需要支持打印样式，测试下来Chrome和FireFox正常，唯独IE8无法应用打印样式，也就是说识别不了@media定义的CSS样式节。
网上解决的办法也五花八门，我在这里整理一下，首先我们还是要从让IE支持media的的思路开始，首先JavaScript大将出马。
1. 项目css3-mediaqueries-js
该项目由Wouter van der Graaf发起（项目地址），旨在为了提供对于类似于IE 5+、Firefox 1+ 和 Safari 2低版本浏览器的Media Queries支持，使用方式也很简单，直接引用脚本即可，当然现在基本上非IE的浏览器和IE9及以上版本已经原生支持Media Queries了，所以我们可以使用IE特有的条件注释处理代码引用，比如下面的代码示例：
因为某些原因近期Google的大部分服务无法使用，特别是谷歌字体和一些公共库的调用问题，因为浏览器加载这些资源多是阻塞形式的，如果不能及时获取资源，那么浏览器将一直在等待，这样就会影响页面其他元素的渲染，对于用户来说，就会表现为页面加载缓慢或者打开困难。
因为我的博客之前调用了Google的字体服务，所以前一段时间打开页面时出现了这类现象，通过FireBug调试找到是Google字体的原因。搜索网络后找到了替代的办法，那就是使用360提供的前端公共库CDN服务缓存库。
这些公共库主要分为：常用前端公共库、Google前端公共库、Google免费字体库。
我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码，当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容，后来的实际应用证明这种做法是不符合用户体验的，而且破解的方法也有很多，比如我曾经写过一篇文章讲解如何解除网页禁止复制的办法。
由此可见，限制右键及复制是不明智的做法，但是今天我仍然要谈谈关于禁止网页复制、右键菜单的事儿，因为随着网页APP技术的发展，网页应用和桌面应用之间的界限越来越模糊，有一些桌面程序实际上是由网页配合JavaScript实现的，另外一些手机应用也可以是由HTML5+JavaScript实现的，在这种情形下，限制右键就是有必要的了，因为作为APP来说，网页的右键选择文字及弹出菜单在大多数情况下显得没有必要了。
对于HTTP基本认证我前一篇文章也有所介绍，但是一次认证后浏览器将会把认证信息保存一段时间以避免在下一次打开时再次认证，也就是说认证成功后每次请求需要认证的页面时浏览器都会附加认证信息，一般在请求头的Authorization节点，但是如果用户需要注销当前登录就略显麻烦了。
不过在IE下比尔叔叔为我们提供了一个便捷的方式，那就是JavaScript执行下面的代码：
document.execCommand("ClearAuthenticationCache") |
试了下，IE下完全正常，如果说这么简单就解决这个问题的话，也太低估我们的浏览器大军了，FireFox和Chrome等非微软系的浏览器根本无视上面的代码，所以只有另辟蹊径了。
项目中设计经常要用到配色，尤其是字体颜色、边框和背景配色，当然对于Web 2.0时代来说，配色首先要让人看上去舒服，不刺眼。因为平常工作需要我收集了一些现成的配色方案供大家参考，部分配色来自于《Web 2.0 Colour Palette》，还有部分配色原始出处已经找不到了，如果有童鞋知道请告知一下，当然如果大家还有一些比较好的配色方案也可以分享一下哦。
项目中要用到上传，由于使用了JQuery脚本库，于是就准备找一款JQuery的上传脚本，挑了几款，觉得都还不错，最后从功能和代码体积的前提下决定采用Uploadify（官方主页）。
代码很轻松的就嵌入到页面中去了，看了下官方的几个配置，感觉挺容易上手的，本来以为就这样配置算完成了，但是今天在FireFox下使用FireBug调试页面时发现了诡异的GET请求，请求的是当前页面的根，比如页面是/tickets/create，那么请求的就是/tickets/，恰恰这个路径我没有设置路由，也就是说请求将返回一个HTTP 404 Not Found的错误，经过进一步的跟踪发现了问题和新加入的Uploadify有关，于是我又检索了官方的文档，结果该配置的都配置了，配置信息是没有什么错误，但是这个诡异的GET依然存在。
今天浏览oschina.net的《网站出bug了？？还是被人黑了啊？？》发现的这个问题，发表评论采用了Ajax技术，但是直接提交Ajax没有起作用，导致返回了原本由JavaScript处理的JSON结果，出现这种情况多数是因为页面JavaScript加载失败或者用户禁用了脚本所致，回想到我以前的设计，有个小技巧可以解决这个问题，现与大家分享下：
基本思路就是在Ajax提交前加入自定义的HTTP请求header，然后结果处理页判断是否有这个header，如果有就说明对方是通过Ajax提交的数据，显示JSON结果；如果没有则说明Ajax没有起作用，然后就直接输出用户友好的标准结果页。