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最佳实践之精妙的自定义事件
Aug 11 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
微信小程序实现拍照和相册选取图片
May 09 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
php中截取字符串支持utf-8
2007/01/18 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
python单例模式的多种实现方法
2019/07/26 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
python能做哪些生活有趣的事情
2020/09/09 Python
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
法学专业个人求职信
2013/09/26 职场文书
工程项目建议书范文
2014/03/12 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
创先争优活动承诺书
2014/08/30 职场文书
自我查摆剖析材料
2014/10/11 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
学校师德师风整改方案
2014/10/28 职场文书
借钱欠条怎么写
2015/07/03 职场文书
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript