1 var index = 0; //标记提示文本DIV数组选中的下标
2 $(function(){
3 var name = _getCookie("member_username");
4 var pwd = _getCookie("member_password");
5 if(name != "undefined" && pwd != "undefined"){
6 $("#member_username").val(name);
7 $("#member_password").val(pwd);
8 }
9
10 var a = 0; //当用上下选择提示文本时，控制DIV的suggestOut事件不使用
11 var allEmail = ""; //提示文本中的email
12 var emails1=["@qq.com","@163.com","@sohu.com","@yahoo.com","@yahoo.com.cn","@yahoo.cn","@sina.com"];
13 $("#frmLoginMember #member_username")
14 .val("请输入注册邮箱或用户名")
15 .css("color","#ddd")
16 .live("focus",function(){
17 if($.trim($(this).val()) == "请输入注册邮箱或用户名"){
18 $(this).val("").css("color","#000");
19 }
20 })
21 .live("blur",function(){
22 if($.trim($(this).val()) == ""){
23 $(this).val("请输入注册邮箱或用户名").css("color","#ddd");
24 };
25 })
26 .live("keyup",function(e){
27 var member_username = document.getElementById("member_username");
28 var _top = member_username.offsetTop;
29 var _left = member_username.offsetLeft;
30 var _width = member_username.offsetWidth;
31 var _height = member_username.offsetHeight;
32
33 var top = member_username.getBoundingClientRect().top;
34 var left = member_username.getBoundingClientRect().left;
35
36 var email_qian=""; //emial地址@前面的字符
37 var email_hou=""; //包括@后面的字符
38 if(e.keyCode==38||e.keyCode==40||e.keyCode==13){ //当按下上下回车时不使用该事件
39 return;
40 }
41 var email = $.trim($(this).val()); //取得email的value
42 // if(email.length>1&&email.indexOf("@")>-1){
43 if(email.length>1){
44 if(email.indexOf("@")>-1){
45 email_qian=email.substring(0,email.indexOf("@"));
46 email_hou=email.substring(email.indexOf("@"),email.length);
47 }else{
48 email_qian=email;
49 }
50
51 var str = "";
52 var flag = 0;
53 for(var i =0;i<emails1.length;i++){//把匹配的emails1数组里的数据遍历到HTML中
54 if(emails1[i].indexOf(email_hou)>-1){
55 if(email_hou==emails1[i]){ //输入了一个完整的email地址则取消提示文本
56 flag=0;
57 break;
58 }
59 flag=1;
60 allEmail = email_qian+emails1[i];
61 str+="<div onmouseover='javascript:suggestOver(this);'";
62 str+=" onmouseout='javascript:suggestOut(this);'";
63 str+=" onclick='javascript:setSearch(this.innerHTML);'";
64 str+=" class='suggest_link'>"+allEmail+"</div>";
65 index=0;
66 }
67 }
68 if(flag==1){
69 var _div = document.getElementById("suggest");
70 if($.browser.msie){
71 _div.style.top = top + _height + 3;
72 _div.style.left = left + 1;
73 }else{
74 _div.style.top = top + _height;
75 _div.style.left = left;
76 }
77
78
79 $("#suggest")
80 .html(str)
81 .width(_width)
82 .show();
83 }else{
84 $("#suggest").hide();
85 }
86 }else{
87 $("#suggest").hide();
88 }
89 })
90 .live("keydown",function(e){
91 var suggests = $("[onmouseover]"); //取得DIV提示文本数组
92 if(e.keyCode==40){ //下
93 if(index<suggests.length-1){
94 index++;
95 }
96 }
97 if(e.keyCode==38){ //上
98 index--;
99 if(index<0){
100 index=0;
101 }
102 }
103 if(e.keyCode==13){ //回车
104 setSearch($(suggests[index]).html());
105 return;
106 }
107 if(suggests.length>0){ //当有提示文本时 按上下选中时 要把其它没选中的DIV样式还原
108 suggests[index].className="suggest_link_over";
109 for(var i = 0;i<suggests.length;i++){
110 if(i!=index){
111 suggests[i].className="suggest_link";
112 }
113 }
114 a=1; //上下键按完后 控制可以用鼠标选中 DIV的suggestOut事件使用
115 }
116 });
117
118 $("body").mousedown(function(event){
119 if($.browser.msie){
120 if(event.button==1){
121 $("#suggest").hide();
122 }
123 }else{
124 if(event.button==0){
125 $("#suggest").hide();
126 }
127 }
128 });
129 });
130 function suggestOver(obj){
131 a=0;
132 var suggests = $("[onmouseover]");
133 for(var i = 0;i<suggests.length;i++){ //用鼠标选中DIV时 把其它没选中的DIV样式还原
134 if(suggests[i]==obj){
135 index = i; //标记当前选中的DIV的数组下标
136 }
137 suggests[i].className="suggest_link";
138 }
139 obj.className = "suggest_link_over";
140 }
141 function suggestOut(obj){
142 if(a==0){ //当用上下选择提示文本时，控制DIV的suggestOut事件不使用
143 obj.className="suggest_link";
144 }
145 }
146 function setSearch(email){
147 $("#frmLoginMember #member_username").val(email);
148 $("#suggest").hide();
149 }
1 <style type="text/css">
2 .suggest_link {
3 background-color: #FFFFFF;
4 padding: 1px;
5 line-height: 20px;
6 }
7
8 .suggest_link_over {
9 background-color: #E8F2FE;
10 cursor: default;
11 }
12
13 #suggest {
14 position:absolute;
15 background-color: #FFFFFF;
16 text-align: left;
17 border: 1px solid #ddd;
18 display: none;
19 }
20 #suggest div{
21 cursor: pointer;
22 color:#6b6b6b;
23 font-size: 12px;
24 font-family: Arial;
25 }
26 </style>
1 <td align="left">
2 <input style="width: 155px;" class="x-input inputstyle" name="member.username" id="member_username" tabindex="1" value="" type="text" reg="\S" tip="请输入用户名"/>
3 <div id="suggest"></div>
4 <a href="${path }/jsp/newweb/user/user_registerone.jsp">立即注册</a>
5 </td>
浙公网安备 33010602011771号