文章目录
  1. 1. Ajax登录
  2. 2. 表单提交
  3. 3. 说说HTML5的下拉list

这里说的 autocomplete 是 HTML 的 form表单里面 autocomplete 属性,并不是什么 jquery 插件什么来的,今天看到这个属性不错,来研究研究。

比如登录163邮箱时,肯定会有这样的提示

autoComplete

不管你保不保存,下次输入账号时都可以看到曾经输过的帐号了。

autoComplete

Ajax登录

比如一个简单登录页面的代码可能是这样的:

1
2
3
4
5
<form action="/login">
<label for="account">account</label><input type="text" name="account" />
<label for="passowrd">account</label><input type="passowrd" name="passowrd" />
<input id="submit" type="submit" value="submit" />
</form>

各家网站都对自己的产品执着,不愿意看到页面跳动,导致AJAX横行。最常见的就是登录,登录成功就进入下一页,登录失败就原地不动,提示失败原因。

所以,很多同学会把代码写成类似这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function checkForm(){
$.ajax(
{url:"check.action",
param:{account:$("#account").val(),password:$("#password").val()}
success:checkSuccess}
);
}
function checkSuccess(resp){
if(resp.result="0"){
location.href="loginsuccess.jsp";
}else{
alert("account not match");
}
}

登录功能是完成了,也实现了失败无抖动。但是发现登录成功之后,再次登录时,输入框里面并不能下拉出历史登录的帐号来。

表单提交

如果写成Ajax你可能要先把结构改为form-submit提交的方式。防抖动嘛,其实解决的办法有很多。先了解一下原理。

  1. form 表单一定要被submit提交,还要把form的 autocomplete 属性设为 off,否则都不会被记录。

  2. 一般用于input type=“text” , html5的其它应该也可以 比如 number,email等,没实验过,password不行,如果不想某个输入框出现下拉,则可以在对应的input的后面加上autocomplete=“off”

  3. 在Ajax返回里面去做form.submit(),是有风险的,目前测试只有Firefox可以,IE和Chrome均不行。其实在Ajax的successFun里面还有很多其它的事不能做,如window.open等等,会被拦截

  4. 触发表单提交前,input一定要有name属性,不要只给个id通过脚本做。

OK,基于上面的原则,随便就可以拿出几个方案

  • Ajax改为同步,这样就不存在浏览器识别性的问题了,缺点是如果耗时高会有“假死“现象

  • 就用最普通的submit,但把form的 target指到一个内嵌的iframe里面。然后由iframe回调登录结果,缺点是你可能第一次就会跳出浏览器提示(实际上是错误密码还没登录进去)~

  • Ajax还是异步,在返回里面触发一个全局事件,简单点说就是一个submit事件,把浏览器忽悠过去。代码如下

1
2
3
4
5
6
7
function checkSuccess(resp){
if(resp.result="0"){
$('#submit').click();
}else{
alert("account not match pas");
}
}

这几个方案各有优缺点,要看产品具体倾向。当然也可以混合使用。

当然要值得注意的是,很多网站的登录是使用https的,如果也要实现的话,需要跨域。关于如何跨域,方法也有不少,可以自行搜索。

说说HTML5的下拉list

其实如果有数据支撑且不考虑低级浏览器,可以考虑下HTML的下拉。W3c上已有例子:代码如下

1
2
3
4
5
6
7
8
9
<form action="/example/html5/demo_form.asp">
网页:<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
文章目录
  1. 1. Ajax登录
  2. 2. 表单提交
  3. 3. 说说HTML5的下拉list