シェアする

  • このエントリーをはてなブックマークに追加

[javascript][jQuery]追加された要素にも対応するエンターのフォーム送信制御

origin_4253985734

Enterでformが送信されないようにjavascriptで制御する方法はネットで検索するとすぐ見つかりますが、追加された要素にも対応させる方法となるとすぐにヒットしませんでした。

単純に$(document).on('keypress', 'dom', function(){})できるかな〜と思ったのですが、keypressはonの引数にならないんですね。
onだとSelecterが使えるので便利なのですが、$(document).keypress(function(){});だと、指定できないため次のように対応しました。

$(document).keypress(function(e){
	var tag = e.target.tagName.toLowerCase();	// タグ名を取得
	var type = e.target.getAttribute('type');	// getAttributeで要素のプロパティを取得(無くてもいい)
	if ( (e.which && e.which === 13) || (e.keyCode && e.keyCode === 13) ) {
		// エンターキーの押下
		if (tag === 'input' && (type === 'text' || type === 'number')) {
			// タグがinputでtypeがtextかnumberなら
			return false;	// キーの押下を無効
		}
	} else {
		return true;
	}
});

keypressのイベントはフォーム入力中に無数に実行されるので、先にエンターキー押下の判定をして、そのあとにタグ、type属性をチェックしています。

getAttributeの引数を変えればどんな属性値でも判定できますね。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする