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

 更新时间:2016年10月08日 08:48:17   作者:LiveWithIt  
这篇文章主要介绍了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支持以下几种参数:

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

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

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

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

效果是这样的:

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

这种方式不需要用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自定义日期比较函数用法示例

    javascript自定义日期比较函数用法示例

    这篇文章主要介绍了javascript自定义日期比较函数用法,涉及javascript日期相关转换、运算操作技巧,需要的朋友可以参考下
    2019-07-07
  • JS产生随机数的几个用法详解

    JS产生随机数的几个用法详解

    下面小编就为大家带来一篇JS产生随机数的几个用法详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • H5 js点击按钮复制文本到粘贴板

    H5 js点击按钮复制文本到粘贴板

    这篇文章主要为大家详细介绍了H5 js点击按钮复制文本到粘贴板,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • javascript实现根据iphone屏幕方向调用不同样式表的方法

    javascript实现根据iphone屏幕方向调用不同样式表的方法

    这篇文章主要介绍了javascript实现根据iphone屏幕方向调用不同样式表的方法,涉及javascript针对样式表动态操作的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-07-07
  • TypeScript中Map对象使用及Map与字典的区别详解

    TypeScript中Map对象使用及Map与字典的区别详解

    Map对象主要的应用场景在于数据重组和数据储存,下面这篇文章主要给大家介绍了TypeScript中Map对象使用及Map与字典的区别的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • 基于JS实现视频上传显示进度条

    基于JS实现视频上传显示进度条

    这篇文章主要介绍了基于JS实现视频上传显示进度条,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • 微信小程序在{{ }}中直接使用函数的方法示例

    微信小程序在{{ }}中直接使用函数的方法示例

    最近在学习微信小程序,在学习中遇到了一些问题,所以进行了总结了下,这篇文章主要给大家介绍了关于微信小程序在{{ }}中直接使用函数的相关资料,需要的朋友可以参考下
    2021-06-06
  • JavaScript创建对象方法实例小结

    JavaScript创建对象方法实例小结

    这篇文章主要介绍了JavaScript创建对象方法,结合实例形式总结了javascript创建对象的基本原理及使用工厂模式、构造函数模式与原型模式创建对象的相关实现技巧,需要的朋友可以参考下
    2018-09-09
  • JavaScript实现九九乘法表的简单实例

    JavaScript实现九九乘法表的简单实例

    下面小编就为大家带来一篇JavaScript实现九九乘法表的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • Bootstrap实现圆角、圆形头像和响应式图片

    Bootstrap实现圆角、圆形头像和响应式图片

    这篇文章主要介绍了Bootstrap实现圆角、圆形头像和响应式图片的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论