html email输入框,html5给文本框实现email域名自动完成效果
产品反馈用户总是输错email的域名,因此服务器得到的email的地址是错误的。比如,有许多用户总将xxx@qq.com输入成xxx@qq.con。
这让后端很烦恼,因为这个email地址是合法的,但是错误也是那么明显的(常识判断,至于qq.con域名是否存在我也不知道)。
为了解决这个错误,下午折腾了一小时,使用到了html5 input里的新的list属性,当用户输入'@'后为用户提示域名信息。如图:
但是后来悲剧的发现这个属性在safari中不支持,从而在App中也无法支持,估计只能在chrome中使用了。就当学习了。贴上代码,大致思路是监听用户输入'@'后,构造datalist,并关联到input上。依赖jquery。
Copy to Clipboard
引用的内容:[www.veryhuo.com]
(function(){
var emails = [{domain: '@qq.com', label: 'qq邮箱'},
{domain: '@163.com', label: '163邮箱'},
{domain: '@126.com', label: '126邮箱'},
{domain: '@hotmail.com', label: 'hotmail邮箱'},
{domain: '@sina.com', label:'sina邮箱'},
{domain: '@gmail.com',label:'gmail邮箱'},
{domain: '@139.com', label: '139邮箱'},
{domain:'@yahoo.com.cn', label: 'yahoo中国邮箱'}];
var addEmailHelp = function(id, otherAddress){
var inputObj = $('input#' + id);
if(inputObj.length == 0){
return;
}
inputObj.keyup(function (ev) {
var val = $(inputObj).val();
var lastInputKey = val.charAt(val.length - 1);
if (lastInputKey == '@') {
var indexOfAt = val.indexOf('@');
var username = val.substring(0, indexOfAt);
if ($('datalist#emailList').length > 0) {
$('datalist#emailList').remove();
}
$(inputObj).parent().append('');
for (var i in emails) {
$('datalist#emailList').append('');
}
if(otherAddress != null && typeof otherAddress != 'undefined'){
for (var i in otherAddress) {
$('datalist#emailList').append('');
}
}
$(inputObj).attr('list', 'emailList');
}
})
};
window.addEmailHelp = addEmailHelp;
})();
使用方法是为先为input设置一个id,然后用addEmailHelp(id, otherAddress)关联它,这个函数已经默认关联上了一些常用的邮箱域名。
otherAdress可以为其关联上自定义的其他地址,调用函数时这个参数可以为空。
一个otherAddress实例: [{domain:'@xxx.com', label: 'xxx邮箱'}, {domain: '@yyy.com', label: 'yyy邮箱'}]。
一个完整调用实例:
email :
Downloads By http://www.veryhuo.com
如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:http://www.veryhuo.com/
提示:可修改后代码再运行!
html email输入框,html5给文本框实现email域名自动完成效果相关推荐
- 利用 Angular Directive 和 @HostBinding 实现输入文本框随着键盘输入自动变色效果
假设有这样一个需求:我们需要增强 HTML 里原生的 input 标签,让其达到,随着用户输入字符时,其颜色自动切换的效果. 这是一个典型的可以使用 Angular Directive 实现的需求. ...
- Jquery实现 TextArea 文本框根据输入内容自动适应高度
原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...
- html ip输入框效果,html5 input文本框输入动画特效
特效描述:文本框输入动画 动画特效.几个更鼓舞人心的风格为文本框输入动画包括一些新技术和新思想. 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Manami Username Web ...
- html文本框 控件,HTML5的文本框表单控件
E-mail表单控件 E-mail表单控件与文本框相似,作用是链接电邮地址,为元素设置type="email":即可配置一个E-mail地址表单控件.只有支持HTML5email属 ...
- html输入框的属性,文本框以及input的属性及功能
属性:text(文本) 默认 password(保密密码) input type="text" 密码: input type="password" 选项按钮: ...
- html5简介的文本框,html5的文本框样式有哪些
用户提问 输入框景背景透明: 鼠标划过输入框,输入框背景色变色: 输入字时输入框边框闪烁(边框为小方型): function borderColor(){ if(self['oText'].style ...
- java swing做输入框,java Swing 文本框的使用
/** * Java Swing 文本框控件 * @author gao */ package com.gao; import java.awt.GridLayout; import javax.sw ...
- php+输入框只读,设置文本框只读(textbox/input readonly)不允许输入
文本框一般是用来让用户输入填写资料的,但有的时候只是用它来显示资料,也就是不允许输入任何内容,这应该怎么设置?只要添加一个只读属性(readonly)就能达到这个目的. 文本框有两种,一种为服务器控件 ...
- adobe cs5 indesign 不显示文本框_Adobe CS5 InDesign自动添加页码
报名美工组,安装Adobe CS5,自学Indesign,参考网络教程,几经波折终于把添加自动页码搞定.以下是一点经验之谈,希望对大家有点帮助. ①先在如图一所示位置双击选择主页. 图一 ②在要加页码 ...
最新文章
- 配置项目启动的时候就加载 servlet
- 找不到媳妇给愁的。。。
- win8安装msi出现提示2503 2502的错误代码
- AsyncTask与多任务
- 网卡驱动收发包过程图解
- Java中对List集合api展示
- 4、EPM ——Smart View介绍和使用
- plsql 通过 excel 创建表
- 在Hive中使用过的函数记录(百分比、截取字符串、分组TOP N、日期转换、日期是第几周)
- Matlab编程实现图像放大
- HTML表格和样式及选择器
- CSS实现鼠标放上图片放大
- Word中在囗中打勾或打叉的方法介绍
- log日志的java动态代理
- Python+Django+Mysql实现购物商城推荐系统 基于用户、项目的协同过滤推荐购物商城系统 网络购物推荐系统 代码实现 源代码下载
- 计算机专业英语四个部分思维导图,一张思维导图,彻底分清英语五大基本句型...
- 有关推挽输出、开漏输出、复用开漏输出、复用推挽输出
- js事件冒泡、阻止事件冒泡以及阻止默认行为
- Jimu310 数据同步
- 开源数据计算引擎,实现媲美ElasticSearch的高性能并发查询
热门文章
- Ace Admin 学习笔记
- 在windows下搭建SVN服务器
- 学习拾遗--用RadioButtonList 或者DropDownList 进行动态赋值问题
- 手写Java的字符串简单匹配方法IndexOf()
- [dp][递归] Jzoj P4211 送你一棵圣诞树
- Java16-java语法基础——异常
- 微信获取地理位置转城市demo
- Python新式类与经典类(旧式类)的区别
- Codeforces Round #460 (Div. 2)
- sklearn的快速使用