JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端


Posted in Javascript onOctober 08, 2016

背景:

想在自己的网站中有这样一个设计:

JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端

用户点击提交按钮之后,就会打开本地邮件客户端,并自动将他在输入框中输入的内容作为邮件的内容,像下面这样:

JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端

mailto可以帮助实现这个功能。

简介:

mailto是一种电子邮件协议,通过该协议可以创建一个指向电子邮件地址的超级链接,通过该链接可以在Internet中发送电子邮件。就像在地址栏输入一个网址会打开一个网页一样,输入mailto:name@email.com,就会打开本地邮件客户端,并将邮件发送给name@email.com。

在HTML中使用mailto

 1.使用方式:

一种方式是将mailto链接写在a标签的href属性中:

<a href="mailto:name@email.com">Email</a>

另一种是写在form的action属性中

<form name='sendmail' action='mailto:name@email.com'>
 <input name='name' type='text'>
 <input name='subject' type='text' >
 <input name='email' type='text' >
 <input name='number' type='text' >
 <input name='body' type='text' >
</form>

2.传递参数:

mailto支持以下几种参数:

JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端

这两种方式都可以传递参数,但是效果不太一样。

如果使用a标签的话,只能在mailto链接中添加参数:

<a href="mailto:to?subject=subject&cc=cc&body=body">send mail</a>

第一个参数后面添加?,其他参数之间用&连接。

效果是这样的:

JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端

如果用form的话,在mailto链接中传递的参数和效果与使用a的相同,他的特别之处是他会把input中的name属性的值和其输入内容也传递进去:

JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端

这种方式不需要用JS获取输入框中的内容,直接可以将用户输入的内容更新到邮件内容区,但是有一个明显的缺点,就是它传进去的格式很不美观也很不方便。几乎没有人会用这样的方式发送邮件,用户还需要自己删掉等号,自己调整样式。

所以我选择用a标签来打开mailto链接,通过JS将内容格式化之后作为参数传递给a标签。

<p class="title">CONTACT ME</p>
  <ul class="email">
   <li><input type="text" name="name" placeholder="Name"></li>
   <li><input type="text" name="email" placeholder="Email Address"></li>
   <li><input type="text" name="number" placeholder="Phone Number"></li>
   <li class="message"><textarea name="message" placeholder="Message"></textarea> </li>
   <button class="btn btn-define">Submit</button>
   <a href="mailto" id="send"></a>
  </ul>

创建一个隐形的a标签,当用户输入好内容点击按钮之后,js会取得输入框中的内容,并且格式化后传递给a,然后模拟点击a标签。

JQuery代码:

function sendEmail(){
 var name=$("[name='name']").val(),
  email=$("[name='email']").val(),
  number=$("[name='number']").val(),
  message=$("[name='message']").val(),
  body="My Name is: "+name+"%0a%0d"
   +"My Email Address is: "+email+"%0a%0d"
   +"My Phone Number is: "+number+"%0a%0d"
   +"Message:"+"%0a%0d"+message;
 $("#send").attr("href","mailto:mamengyi1121@163.com?body="+body);
 document.getElementById("send").click();
}
$(document).load(
 $(".btn").click(sendEmail);
);

其中的%0d%0a是回车符合换行符,我的邮件客户端不能解析HTML格式的字符,(传递<br>无法实现换行),传递UTL编码则可以实现。

Javascript 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
Javascript 类、命名空间、代码组织代码
Jul 31 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
Javascript单例模式的介绍和实例
Oct 08 #Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 #Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 #Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 #Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 #Javascript
jquery删除table当前行的实例代码
Oct 07 #Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 #Javascript
You might like
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
php中上传文件的的解决方案
2018/09/25 PHP
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
python实用代码片段收集贴
2015/06/03 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
常见的python正则用法实例讲解
2016/06/21 Python
微信跳一跳游戏python脚本
2020/04/01 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
Python根据服务获取端口号的方法
2019/09/25 Python
pytorch实现线性拟合方式
2020/01/15 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
护理自荐信
2013/10/22 职场文书
女子职高个人自荐书
2014/02/01 职场文书
介绍信如何写
2015/01/31 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python