フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法
formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力した内容を本文に差し込みたいというケースがあった。メーラーの起動はmailtoでいけそうなものの「ボタンクリック時にmailtoを実行できるのか?」「mailto実行の際、動的に本文を差し込めるのか?」等が不明。以下に実装方法をメモ。
サンプル
https://taitan916.info/sample/mailto/
ソースコード
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>mailtoのテスト</title> </head> <body id="top"> <label for="body">本文</label> <textarea id="body"></textarea> <input id="mailto" type="button" value="メーラー起動"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> $(function(){ $('#mailto').on('click', function(){ let body = $(`#body`).val(); if( !body ){ alert(`本文が入力されていません。`); return false; } //改行コードを置換 body = body.replace(/\n/, '%0D%0A'); location.href = `mailto:test@test.com?subject=件名&body=${body}`; }); }); </script> </body> </html>
解説
mailtoは通常aタグのhrefに設定するため「location.href = `mailto:`」という形でjQueryからメーラを起動させられる。
mailtoで設定する本文の改行は「%0D%0A」になるため「body.replace(/\n/, '%0D%0A')」で置換処理している。
関連記事
-
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...
-
-
「jQuery.browser is undefined」エラーの対応方法
jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...
-
-
adblock(広告削除)設定している場合はページを表示させない
iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...
-
-
Flashを用いずJavaScriptでコピー&カット機能を実装する方法
以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...