JS中使用mailto實(shí)現(xiàn)將用戶在網(wǎng)頁中輸入的內(nèi)容傳遞到本地郵件客戶端

更新時間：2016年10月08日 08:48:17 作者：LiveWithIt

這篇文章主要介紹了mailto實(shí)現(xiàn)將用戶在網(wǎng)頁中輸入的內(nèi)容傳遞到本地郵件客戶端的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

背景：

想在自己的網(wǎng)站中有這樣一個設(shè)計(jì)：

用戶點(diǎn)擊提交按鈕之后，就會打開本地郵件客戶端，并自動將他在輸入框中輸入的內(nèi)容作為郵件的內(nèi)容，像下面這樣：

mailto可以幫助實(shí)現(xiàn)這個功能。

簡介：

mailto是一種電子郵件協(xié)議，通過該協(xié)議可以創(chuàng)建一個指向電子郵件地址的超級鏈接，通過該鏈接可以在Internet中發(fā)送電子郵件。就像在地址欄輸入一個網(wǎng)址會打開一個網(wǎng)頁一樣，輸入mailto:name@email.com，就會打開本地郵件客戶端，并將郵件發(fā)送給name@email.com。

在HTML中使用mailto

1.使用方式：

一種方式是將mailto鏈接寫在a標(biāo)簽的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.傳遞參數(shù)：

mailto支持以下幾種參數(shù)：

這兩種方式都可以傳遞參數(shù)，但是效果不太一樣。

如果使用a標(biāo)簽的話，只能在mailto鏈接中添加參數(shù)：

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

第一個參數(shù)后面添加？,其他參數(shù)之間用&連接。

效果是這樣的：

如果用form的話，在mailto鏈接中傳遞的參數(shù)和效果與使用a的相同，他的特別之處是他會把input中的name屬性的值和其輸入內(nèi)容也傳遞進(jìn)去：

這種方式不需要用JS獲取輸入框中的內(nèi)容，直接可以將用戶輸入的內(nèi)容更新到郵件內(nèi)容區(qū)，但是有一個明顯的缺點(diǎn)，就是它傳進(jìn)去的格式很不美觀也很不方便。幾乎沒有人會用這樣的方式發(fā)送郵件，用戶還需要自己刪掉等號，自己調(diào)整樣式。

所以我選擇用a標(biāo)簽來打開mailto鏈接，通過JS將內(nèi)容格式化之后作為參數(shù)傳遞給a標(biāo)簽。

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

創(chuàng)建一個隱形的a標(biāo)簽，當(dāng)用戶輸入好內(nèi)容點(diǎn)擊按鈕之后，js會取得輸入框中的內(nèi)容，并且格式化后傳遞給a，然后模擬點(diǎn)擊a標(biāo)簽。

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>無法實(shí)現(xiàn)換行），傳遞UTL編碼則可以實(shí)現(xiàn)。

您可能感興趣的文章: