IEで入力なしの場合にTextareaのPlaceholderの値が入力値としてされる問題の対処法

IE11で入力なしの場合にPlaceholderの値がSubmitされる問題

IEなんてみんな使わなければいいのに…
みんなChrome使おうよ…ブラウザ1つにしよう…
Webエンジニアをやっていると誰しもが1度は思うことだと思います。

JSゴリゴリのサイトとかだとを作っていると、立ちはだかるIEで動かない現象ですが、
なんと普通のHTML5の動作でも変な動きをするみたいです。

Plaeceholderの値がSubmitされる

え?(^o^)
調べてみると周知のバグ(仕様?)のようです。
本当になんなんだこのゴm… あんまり言うと良くないので早速対処法を考えます。

入力なしを認めない

これは単純です。
Submitされるときに入力されていなかったら、エラーにしちゃえばいいのです。

「でも任意入力の項目だったらどうすんねん!!」

そうですね。はい次。

JSでサブミット前にPlaceholderの中身を空にする

これしかないかなと思います。
以下みたいな感じでサブミット前に消すことにしました。

HTML

<form>
  <textarea></textarea>
  <button id="button_to_submit">submit</button>
</form>

JavaScript(jQuery)

//Submit用ボタンにクリックイベント
$("#button_to_submit").click(function(){
  $("textarea").attr("placeholder",""); //Placeholderの中身を空にして
  $("form").submit(); //フォームを送信!
})

まとめ

今回の記事は短くなりましたが、ここまでです。(上の2つくらいしか思いつかんかった)
ググってみてもあんまり対処法が見つからず。。。なにか一般的な対処法とかあったりするんでしょうか?
あったら教えてくださいね\(^o^)/

では〜〜