文本框输入邮箱 联想功能

于 2019-12-25 16:22:10 发布
阅读量714 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tanqingfu1/article/details/103701326
版权

前言：码奴生来只知道前进

很多时候在用户输入邮箱的时候 大多是使用快捷方式

效果图如下

 

 <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" list="input_list" name="text" id="email" placeholder="请输入邮箱"/>
        <datalist id="input_list"></datalist>
    </body>
    <script type="text/javascript"  src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        var emailArry = [
                "@qq.com",
                "@sina.com",
                "@163.com",
                "@126.com",
                "@yahoo.com.cn",
                "@gmail.com",
                "@sohu.com"
        ];
        $("#email").bind('input propertychange',function(){
        	 var key = $("#email").val();
        	 if(key.indexOf("@") != -1){
                  key = key.slice(0,key.indexOf("@"));
             }
             var mailBoxLen = emailArry.length;
             var table = "";
             for(var i=0; i<mailBoxLen; i++){
                 table += '<option value="'+ key + emailArry[i] +'"></option>';
             }
             $("#input_list").html(table);
        });
    </script>
</html>

 

码奴生来只知道前进~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
输入框联想功能
Luzaofa的博客
11-24 7475
在实际开发中想必大家肯定会遇到如何简化输入框功能，传统的输入框是需要直接输入检索需要的所有关键词，然后提交发起检索，但这样太过于死板，不够灵活，类似于下拉菜单一样，但下拉菜单只能选择，有却是了输入的功能，接下来我们就来研究研究如何实现输入框的联想功能。
实现文本框的联想功能（类似邮件的收件人）
sardineany的专栏
06-12 3122
<br /> 前一阵，公司需求做一个C#的邮件收发系统。实现C#邮件收发并不困难，这里就不多说了。我遇到的问题是在输入收件人的时候需要进行收件人的联想，比如：我的通讯录中有aa@126.com  这么一位联系人，我在文本框中输入a的时候，自然就能联想出这个联系人。其实实现这个也不难。代码如下：<br />    this.textBox1.AutoCompleteCustomSource.AddRange(new string[] {<br />                "aa@126.com"});
email邮件联想功能
12-01
email邮件联想功能
文本框输入邮箱自动联想补全
weixin_33691700的博客
12-16 254
文本框输入邮箱自动联想补全 <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="cont...
文本框输入自动联想功能
weixin_33949359的博客
08-24 915
<!DOCTYPE html><html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <titl...
基于jquery的邮箱输入联想插件开发
07-01 276
js代码: /*create by code_bunny 20140701 973295131@qq.com https://github.com/OOP-Code-Bunny */ (function ($) { $.fn.autoComplate = function (opts) { this.each(function () { ...
jquery css实现邮箱自动补全
10-21
首先，我们需要创建HTML结构，包含一个用于输入邮箱的文本框。在HTML代码中，可以看到一个简单的表单，包含姓名和邮箱输入字段： ```html 姓名：<input type="text" name="userName" id="userName"/><br/> 邮箱...
IOS-UITextField-邮箱后缀联想匹配
阿雷的专栏
10-23 3073
最近做项目，有一个功能，百度了一下 结果没有 就研究了一下。  当用户输入邮箱形式的账号时，输入完“@”符号后，联想出常用的邮箱 点击某一行，将改行代表邮箱自动输入到账号输入框内   如果控件属性不懂或者不认识 ,请百度! 说一下原理，首先我们要判断输入的是否是“@”，之后在在进行范围截取，最后匹配  - (BOOL)hasPrefix:(NSStri
【Android】自定义控件实现自动补齐邮箱后缀的输入框
后进生的代码笔记
04-24 1801
使用自定义控件实现一个可以自动补齐邮箱后缀、实时校验邮箱格式的输入框
js 自动显示邮箱后缀列表
03-17
js 自动显示邮箱后缀列表 js 自动显示邮箱后缀列表
安卓邮件相关相关-android邮件收件人控件类似腾讯QQ邮箱收件人输入框功能.rar
07-29
android邮件收件人控件，类似腾讯QQ邮箱收件人输入框功能.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
文本框智能感知
03-29
在描述中提到的“在文本框中获得焦点，输入字符，自动显示出相关的内容”，这通常指的是自动完成功能或者下拉提示。这种技术基于已有的数据集或先前用户的输入历史，通过分析和匹配用户正在输入的信息，实时显示可能...
邮箱后缀自动联想
weixin_30505043的博客
10-16 279
借用人家的插件加上自己处理的兼容： 1.$.support.msie 是判断浏览器兼容方法 jQ9取消了$.support 2.input propertychange（ie专属） 有兼容问题 可以用keyup事件代替（无需兼容） 代码：html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h...
JavaScript实现邮箱后缀提示功能
weixin_44302580的博客
10-25 593
需求：当在input文本框中输入数字时，页面会同步自动提示，可以使用鼠标（经过背景改变）点击也可以使用键盘上下键。 效果图： <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="...
JS实现邮箱提示补全效果
zhuolei123的专栏
02-16 4402
现在要实现的是类似网易登录时的邮箱提示框的效果，不过这里我打算稍微改变一下，就是在输入@的时候再出现邮箱提示列表 实现提示的原理是采用正则进行匹配 效果图如下： 代码如下： ul{padding:0px;margin:0px;} .login_autoComplete{width:256px;border:1px solid #4190db;positio
JS实现联想输入（一）
weixin_33859844的博客
02-23 319
这里是我们的项目中的一个使用JS实现联想输入的功能代码，在此做个小的记录并且将它分享给大家希望对园中的朋友有用！ 我将分享三段都非常简单的代码，仅仅作为个人的一点小小的积累而已！ 1：后台的Action方法的代码，用于取数据，查询语句是模糊查询的方式（如果数据库中的数据相似度非常大，可以采用分页的方式取部分的数据，比如：取十条记录）。 /** * @说明：这是一段伪码...
js实现的邮箱自动补全
秘密基地
10-29 8192
今天练习了一个邮箱自动补全的内容，在前端输入邮箱的时候系统可以自动补全，这个技能点比较简单，现在写一下我自己的做法： 这里需要注意两个点： １、前面用户自己输入，后面@之后的内容自动补全 ２、当用户输入@时，可以自动为用户匹配相应的邮箱后缀 ３、用户可以通过点击已匹配好的邮箱输入到框中ＨＴＭＬ５代码（页面部分）：<input id="regemail" class="int-type w-t
填写邮箱联想功能
qq_38345598的博客
01-15 1411
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;meta http-equiv="content-type" content="tex
使用JavaScrip对单文本框输入邮箱地址进行验证
最新发布
03-31
以下是使用JavaScript对单文本框输入邮箱地址进行验证的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Email Validation</title> <script> function validateEmail() { var email = document.getElementById("email").value; var regExp = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; if (regExp.test(email)) { alert("Valid email address!"); } else { alert("Invalid email address!"); } } </script> </head> <body> <label for="email">Email:</label> <input type="text" id="email" name="email"> <button onclick="validateEmail()">Validate</button> </body> </html> ``` 该代码中，使用了正则表达式对输入的邮箱地址进行验证，如果验证通过则弹出“Valid email address!”的提示框，否则弹出“Invalid email address!”的提示框。可以根据实际需求进行相应的修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码奴生来只知道前进~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值