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

本是古典何须时尚 2022-05-26 09:43 40阅读 0赞

# 利用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支持以下参数：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>to</td> 
   <td>收信人</td> 
  </tr> 
  <tr> 
   <td>subject</td> 
   <td>主题</td> 
  </tr> 
  <tr> 
   <td>cc</td> 
   <td>抄送</td> 
  </tr> 
  <tr> 
   <td>bcc</td> 
   <td>暗抄送</td> 
  </tr> 
  <tr> 
   <td>body</td> 
   <td>内容</td> 
  </tr> 
 </tbody> 
</table>

写入语句：

将有如下结果：  
![这里写图片描述][70]

## 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 输出结果 ###

![这里写图片描述][70 1]

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

[70]: /images/20220526/a2f03939e5cf4706880bfdffb9b87f50.png
[70 1]: /images/20220526/5f49e2fd49d643469006f3077c68c0e8.png
[https_pan.baidu.com_s_1BrYnZ9uv1XKqqB5v-lowmQ]: https://pan.baidu.com/s/1BrYnZ9uv1XKqqB5v-lowmQ