java 将网页注册框提取到客户端_JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端...

背景:

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

2b0d82bd7cf2d321b9db5499e0ea5562.png

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

729ef6b954615652c22978d81690ac94.png

153b27c77f5be3ec7463968e718b7f43.png

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

简介:

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

在HTML中使用mailto

1.使用方式:

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

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

2.传递参数:

mailto支持以下几种参数:

f23778b2d1a6c52ecfa6d3b63b5a352f.png

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

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

send mail

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

效果是这样的:

32d46443ab5e26b6bd8c36750e3572ba.png

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

c66300dd8d28ba7995a7e76641131afe.png

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

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

CONTACT ME

Submit

创建一个隐形的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格式的字符,(传递
无法实现换行),传递UTL编码则可以实现。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值