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

利用mailto实现邮件发送

1 mailto简介

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

2 mailto的使用

（1）使用语句

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

结合其参数使用该语句，参数介绍如下。

（2）传递参数
mailto支持以下参数：

参数	含义
to	收信人
subject	主题
cc	抄送
bcc	暗抄送
body	内容

写入语句：

<a  harset="utf-8" href="mailto:Angel?subject=conctact &cc=123@163.com&body=Hello world">send mail</a>

将有如下结果：

3 操作部分分析

1>练习中用html中input、ul、li 语句完成输入数据部分的表格建立

  <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>

2> css对背景进行调整，用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();
}


$(function(){
   //发送邮件
   $(".btn").click(sendEmail);
   //在表单输入时显示label
   $(".email").on("input propertychange",["input","textarea"],function(e){
        $(e.target.parentNode).toggleClass("in",!!$(e.target).val());
    })

3> html + js +css 输出结果

完整代码：
链接：https://pan.baidu.com/s/1BrYnZ9uv1XKqqB5v-lowmQ 密码：fh82