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 相关文章推荐
jquery validate poshytip 自定义样式
Nov 26 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
html数组字符串拼接的最快方法
2009/09/16 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
python的继承知识点总结
2018/12/10 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
Python常用外部指令执行代码实例
2020/11/05 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
医科大学生毕业的自我评价分享
2013/11/12 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
计算机专业自荐信
2014/05/24 职场文书
绿色环保标语
2014/06/12 职场文书
三严三实学习心得体会
2014/10/13 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
python使用glob检索文件的操作
2021/05/20 Python
压缩Redis里的字符串大对象操作
2021/06/23 Redis