ナノのフォームメール機能テキストエリアに『#』を入力した際のバグについて

21-12-05 21-12-05

記事再編
記事再編
記事公開

ナノのフォームメール機能のテキストエリア(複数行入力欄)への#入力が&sharp;に置き変わることがあるって話です。

結論から言うと原因はサッパリ不明ですが発生状況の推察とそこからJavaScriptで対処可能と考えています。

「誰が困るんだよこのバグ」と思わなくもないですが自分は微妙に困った(ソースコードを送っていただいた際に十中八九ないだろうけど故意に&sharp;にしているかの見分けがつかない)ので残しておきます。　あと後日あげる予定の記事の布石になります。

対処方法

ソースコード

各レイアウト末尾にそれぞれ下記を追加してください。

入力画面レイアウト


        
	<script>
	(()=>{
	
	let $form = document.forms[0];
	let $elms = Array.from($form.elements);
	let $inputs = [];
	let inputData = JSON.parse(sessionStorage.getItem('form'))||{};
	sessionStorage.removeItem('form');
	
	$elms.forEach($i=>{
		if(($i.tagName=='TEXTAREA'||$i.tagName=='INPUT'&&$i.type=='text')&&!!$i.name){
				$inputs.push($i);
				if(inputData[$i.name]) $i.value = inputData[$i.name];
		};
	});
	
	$form.addEventListener('submit',()=>{
		inputData = {};
		$inputs.forEach($i=>{
			if($i.value.indexOf('#')<0) return true;
			inputData[$i.name] = $i.value;
		});
		if(Object.keys(inputData).length) sessionStorage.setItem('form',JSON.stringify(inputData));
	});
	
	})();
	</script>

プレビュー画面レイアウト


        
	<script>
	(()=>{
	
	let $form = document.forms[0];
	let $elms = $form.elements;
	let inputData = JSON.parse(sessionStorage.getItem('form'))||{};
	sessionStorage.removeItem('form');
	
	Object.keys(inputData).forEach(name=>{
		if(!!$elms[name]) $elms[name].value = inputData[name]; 
	});
	
	$form.cancel.addEventListener('click',()=>{
		inputData = {};
		Array.from($elms).forEach($i=>{
			if($i.value.indexOf('#')<0) return true;
			inputData[$i.name] = $i.value;
		});
		if(Object.keys(inputData).length) sessionStorage.setItem('form',JSON.stringify(inputData));
	});
	
	})();
	</script>

送信完了画面レイアウト


        
	<script>
	sessionStorage.removeItem('form');
	</script>

プレビュー画面レイアウトへの追加は、非表示設定の場合必要はないです。
表示ページ上でform要素が複数ある場合、フォームメール用のform要素が一番最初にくる必要があります。
sessionStorageを使っているので「HEAD・HTML詳細」の「文書型宣言」項は<!doctype html>にしてください。

9割方これでカバーできる筈なのですが、プレビュー画面からページ移動のち、履歴やブラウザバック等でプレビュー画面に戻り『再編集』選択　という手順を辿るとブラウザによっては動作しません。

補足

バグについて

内容

ナノから出力されるフォーム内テキストエリア中の#となるべき箇所が&sharp;になっている

発生条件

フォームメール機能
自由入力(複数行)の入力欄
フォーム送信時、なんらかの理由で『入力画面』を返された際に発生

なんらかの理由は必須入力項の入力不備であったり禁止語句使用だったりプレビュー画面からの再編集選択であったり。

『&sharp;』について

♯の名前文字参照、なんですけどナノだと編集ページテキストエリアに記述しておくと#に置き換えて出力してくれる独自タグです。

見解(？)

「独自タグから何かに置き換えて出力」というのはわかるのですが逆をやる意味がわからないんですよね。　かなり好意的に見て何かの一時退避に使ったあと戻し忘れとか……でしょうか？　これもフォームメール機能のみなのが意味不明さに拍車をかけます。　他に似たようなフォームメールでの置き換え事項が見つかったら法則性や理由についてわかるかもしれないですが現状だと本当に全くわかりません。

全く別件で「記述から独自タグに置き換えて出力」される不具合(？)を把握しているのですがそっちは本件とは違い何となく内部処理から原因まで透けて見えるので余計に気になる……