2018-05-16(Wed)

HTMLテキストボックスのENTERキーでsubmitされないようjavascriptでコチョコチョ(jQuery不使用)

JavaScript-logo.png

既存案件で、テキストボックス上でENTERキーを押すとsubmitされるという作りが多くどないしよ。
面倒くさいのでjavascriptで処理する。
ググると沢山出てくる多くのサンプルがjQuery前提で書かれていたためjsオンリーで書き直したサンプルをメモ。
またclassを指定して無効化させないというステキなアイディアを以下から拝借した。
https://qiita.com/awakia/items/17457d6b1809dd803413

// HTML読み込み後に発動
document.addEventListener("DOMContentLoaded", function() {
// 全テキストボックスのENTERキーを無効化
disable_enterkey_for_all_inputtext();
});

/**
* ページ内の全テキスト&パスワードボックスの ENTERキー を無効化
* inputタグ内に class="allow_submit" 付加すると有効のまま
*/
function disable_enterkey_for_all_inputtext()
{
// 全inputを取得
var inputs = document.getElementsByTagName('input');
for (var i=0; i<inputs.length; i++) {
// text と password の場合に処理(class="allow_submit"を除く)
if ( (inputs[i].type == 'text' || inputs[i].type == 'password')
&& inputs[i].className != 'allow_submit'
) {
inputs[i].addEventListener('keypress', function(event) {
// ENTER キー無効化
if (event.keyCode == 13 ) {
event.returnValue = false;
}
}, false);
}
}
}


これでHTMLロード後に全てのinput type="text" 及び type="password" でENTERキーが無効となり、意図せずsubmitされるのを防げる。
 
 
プロフィール

nakami

Author:nakami
可愛いテンプレートに似合う俺
うそAチームのスミス大佐

NAVI
カテゴリー
最近の記事
リンク
FC2カウンター
ブログ内検索
RSSフィード
sponsored link