最近在弄一个网站，会员注册、登录时均需要邮箱，为是用户录入，仿sohu登录，用jquery做了一个邮箱输入智能提示，不足之处，请大家指正，不要只扔板砖啊...呵...
目前ie,firefox测试没有问题。估计其他几个常用浏览器也没有问题了。 昨天还有bug，现在已经改过了，欢迎大家提建议啊...
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>邮箱输入框提示列表效果</title>
<style type="text/css">
<!--
body{background:#fff}
.email_div_menu {
position: relative;/* relative absolute fixed*/
left:0;
top:0;
width:202px;
border:1px solid #ccc;
height:auto;
background: #FFF;
margin-top:-3px;
font-size:14px;
z-index:0;
overflow:hidden;
display:none;
}
.email_div_menu ul{
margin:0;
padding:0;
width:202px;
list-style:none;
position: relative;
z-index:3;
background-color: #FFFFFF;
}
.email_div_menu ul li{
display:block;
width:202px;
height:25px;
line-height:25px;
text-indent:15px;
border-bottom:1px solid #ccc;
color:#666;
}
.email_div{
width:200px;
height:25px;
position:absolute;
z-index:4;
}
.email_div input{width:200px;}
.email_div div{position:relative;top:0;left:0;margin-bottom:5px}
.menu_ul_li_current{background:#6699FF;font-size:16px; font-amily: "宋体";font-weight: bold;}
.menu_ul_li_list{}
.cl {
clear:both;
position:absolute;
top:100px;
z-index:-5;
}
.inputtwo {width:200px;height:20px;}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#email").inputSelect();
});
$.fn.inputSelect=function(){
this.focus(function(){
$(".email_div_menu").show();$(this).keyup();
});
this.blur(function(){
$(".email_div_menu").hide();
});
this.keyup(function(event){
var tv = $(this).val();
var tv0 = "";
var tv1 = "";
if(tv.indexOf("@") > -1){
tv0 = $.trim(tv);
tv0 = tv0.substring(tv0.indexOf("@"));
tv1 = $.trim(tv).substring(0,$.trim(tv).indexOf("@"));
}
//alert($(this).val());
$(".email_div ul li").each(function(i){
tl = $.trim($(this).html());
tl = tl.substring(tl.indexOf("@"));
$(this).removeClass("menu_ul_li_list");
if(tv.indexOf("@") < 0){
$(this).html(tv + tl);
$(this).addClass("menu_ul_li_list");
}else{
$(this).html(tv1 + tl);
if(tl.indexOf(tv0) == -1){
$(this).removeClass("menu_ul_li_current");
$(this).hide();
}else{
$(this).show();
$(this).addClass("menu_ul_li_list");
}
}
});
if(event.keyCode == 13){
var o = $(".email_div_menu").find(".menu_ul_li_current");
if(o.size() > 0){$(this).val($.trim(o.html())); $(".email_div_menu").hide();}
}
});
this.keydown(function(event) {
//alert(event.keyCode);
var o = $(".email_div_menu").find(".menu_ul_li_current");
var olist = $(".email_div_menu").find(".menu_ul_li_list");
//alert("o:" + o.size()+ "-------olist:" +olist.size());
switch (event.keyCode){
case 46:
case 8: // back
$(this).focus();
break;
case 38: // up
//alert("o:" + o.size()+ "-------olist:" +olist.size());
if(o.size() > 0){
o.removeClass("menu_ul_li_current");
o.prev().addClass("menu_ul_li_current");
}else if(olist.size() > 0){
$(".menu_ul_li_list").eq($(".menu_ul_li_list").size() - 1).addClass("menu_ul_li_current");
}else{
$(".email_div ul li").eq($(".email_div ul li").size() - 1).addClass("menu_ul_li_current");
}
break;
case 40: // down
///alert("o:" + o.size()+ "-------olist:" +olist.size());
if(o.size() > 0){
o.removeClass("menu_ul_li_current");
o.next().addClass("menu_ul_li_current");
}else if(olist.size() > 0){
$(".menu_ul_li_list").eq(0).addClass("menu_ul_li_current");
}else{
$(".email_div ul li").eq(0).addClass("menu_ul_li_current");
}
break;
}
});
$(".email_div ul li").mousedown(function(){
$("#email").val($.trim($(this).html()));
$(".email_div_menu").hide();
});
$(".email_div ul li").mouseover(function(){
$(".email_div ul li").removeClass("menu_ul_li_current");
$(this).addClass("menu_ul_li_current");
});
$(".email_div ul li").mouseout(function(){
$(this).removeClass("menu_ul_li_current");
});
};
</script>
</head>
<body>
<div style="width:300px; height:100%; background-color:#FFFFCC; padding:10px; border:4px solid #6699FF;">
<div>昵称: <input name="password" type="text" id="passwrod" class="inputtwo">
</div>
<div><table>
<tr>
<td width="40" align="left">邮箱:</td>
<td width="10" valign="top">
<div class="email_div">
<input type="text" id="email" name="email" class="inputtwo">
<div class="email_div_menu">
<ul>
<li>@163.com</li>
<li>@126.com</li>
<li>@yaho.com</li>
<li>@qq.com</li>
<li>@693333.com</li>
<li>@69333.com</li>
<li>@693.com</li>
<li>@69.com</li>
<li>@6.com</li>
</ul>
</div>
</div>
</td>
</tr>
</table></div>
</div>
<div class="cl"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
分享到：
相关推荐
在本文中，我们将深入探讨如何使用jQuery来实现一个功能，即在用户在文本框中输入时自动提示邮箱的后缀。这个功能对于提高用户体验尤其有用，因为它可以帮助用户快速准确地输入有效的电子邮件地址。 首先，我们需要...
通过使用jQuery，开发者可以更高效地编写跨浏览器的JavaScript代码。 要实现"点击文字后变成文本框"的功能，我们首先需要在HTML中设置元素，通常是一个`<span>`或`<p>`标签，包含我们需要让用户编辑的文本。例如： ...
本篇文章将详细讲解如何利用jQuery实现一个文本框输入自动提示的功能，这一功能常见于搜索引擎，如百度搜索框，当用户在输入框中键入文字时，系统会实时提供相关的搜索建议。 一、基本原理 自动提示功能的核心是...
本文将详细讲解如何使用 jQuery 和相关插件创建一个仿搜索引擎的文本框自动补全功能。 首先，我们需要引入 jQuery 库。在本例中，使用的是 `jquery-1.7.2.min.js` 版本。jQuery 是一个轻量级、高性能的 JavaScript ...
本示例中，我们将探讨如何使用jQuery实现textarea文本框的字数限制功能，并实时提示用户输入的字符数量。 首先，让我们了解jQuery的基本概念。jQuery通过一个"$"符号作为入口，提供了一种简洁的方式来选择DOM元素、...
《jQuery实现文本框输入表情符号技术详解》 在现代网页应用中，用户交互体验的提升是至关重要的。其中，允许用户在文本输入框中插入表情符号已经成为一种常见且受欢迎的功能，尤其是在社交媒体和聊天应用程序中。...
在本文中，我们将深入探讨如何使用jQuery实现一个文本框输入文字自动筛选的功能，这在许多网页应用中都是一项实用的功能，比如搜索栏、过滤列表等。这个功能的主要目的是提高用户体验，让用户在输入关键字时能够实时...
标题中的“文本框输入提示信息”通常指的是在用户界面（UI）设计中，为了帮助用户更好地理解输入字段的用途或格式要求，所显示的一种辅助性文字。这些提示信息会在文本框为空或者用户聚焦前处于可见状态，一旦用户...
js代码 [removed] //显示限制输入字符method function textAreaChange(obj){ ... var count_total = $this...jQuery textarea文本框输入文字字数限制提示代码，设置固定输入字符，实时计算显示已经输入多少字符。
在这个案例中，我们探讨的是如何使用Ajax来实现一个文本框输入时的提示功能，这些提示信息是从数据库动态获取的。 首先，我们需要在前端创建一个文本框，用户在此输入信息时，会触发Ajax请求。HTML代码可能如下： ...
jquery 文本框提示标签 此为完整的项目下载后可直接运行
- 使用 jQuery 选择器获取与文本框关联的提示元素 `valobj`。 - 判断文本框内容是否为空，若为空，则设置相应的错误提示，并将该文本框对应的验证结果标记为失败。 - 若不为空，则根据不同文本框的类型使用不同的...
《jQuery实现文本框输入文字放大预览效果详解》 在网页设计中，用户交互体验是至关重要的元素之一。为了提升用户的输入体验，一种常见的技术手段是实时预览用户在文本框中输入的文字，例如文字放大预览效果。本文将...
而“JQuery插件之自增长多行文本框”是一个专为多行文本输入设计的插件，旨在提供更好的用户体验。这个插件名为“grow-textarea”，其主要功能是动态调整文本框的高度，根据用户输入的内容自动扩展或收缩，以展示...
2. 邮箱验证：在文本框中输入邮箱地址时，Validform能检测输入是否符合标准的邮箱格式。这通常通过正则表达式实现，例如`/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/`，确保输入的字符串符合电子邮件的标准...
3. **监听输入事件**：使用jQuery的`on('input')`方法监听文本框的输入事件。每当用户输入或删除字符时，该函数都会被调用。 ```javascript inputField.on('input', function() { var currentChars = $(this).val...
【Ajax文本框输入提示】是一种前端交互技术，用于在用户输入文本时实时提供相关的建议或提示信息。在网页设计中，这种功能可以显著提升用户体验，尤其是对于搜索框或需要输入特定信息的表单。这个例子是基于Java和...