イベント実行中にevent.preventDefault()を呼び出すと、当該要素のデフォルトのイベントを実行しないようにできる。
公式ドキュメントの例のように、aタグのページ遷移機能を無効化してbuttonのように使うことが可能だったりする。
event.preventDefault() | jQuery API Documentation
目次
ソースコード
aタグのページ遷移を無効化してbutton代わりに使うのであれば、最初からbuttonタグを使う方が良い気がする。
テキストフォームはバリデーションに使える。
HTML
aタグのページ遷移を無効化
クリックしてもページ遷移しない
テキストエリアで半角英数字以外の入力を制限
CSS
body {
margin: 20px;
}
h2 {
padding: 10px 0;
margin-top: 50px;
}
.error {
font-size: 12px;
color: red;
margin-top: 10px;
}
jQuery
$(function(){
$('a').click(function(event) {
// ページ遷移を阻止
event.preventDefault();
// ボタンを押したときの処理
// ...
});
$('input').keypress(function(event) {
// エラーメッセージを消す
$('p.error').text('');
// 文字コードを取得
var charCode = event.charCode;
//半角数字
if (48 = charCode && charCode = 57) {
return;
}
// 半角英字(大文字)
if (65 = charCode && charCode = 90) {
return;
}
// 半角英字(小文字)
if (97 = charCode && charCode = 122) {
return;
}
// 半角英数字以外のとき
event.preventDefault(); // 入力を阻止
$('p.error').text('※半角英数字以外の文字は入力できません'); // エラーメッセージを表示
});
});