デフォルト・アクションの抑止
デフォルト・アクション（ブラウザが最初から組み込んでいる挙動）を無効にして独自のアクションを加えたい場合はpreventDefaultメソッドを使います。
Internet Explorerでは、window.eventオブジェクトのreturnValueプロパティにfalseをセット、Safari1.3では、preventDefaultメソッドが機能しないためその対策が必要です。
<![CDATA[
function XpreventDefault(evt) {
// W3C DOM準拠ブラウザ
if(evt && evt.preventDefault) {
evt.preventDefault();
// Safari 1.3対策
evt.currentTarget['on'+evt.type] = function() {return false;};
// Internet Explorer
} else if(window.event) {
window.event.returnValue = false;
}
}
]]>
イベントの伝播を抑止
イベントが発生すると、バブリングによってイベントがドキュメントツリーの頂上まで伝播します。
所定の要素でイベントを捕捉したら、それ以上伝播しないようにstopPropagationメソッドを使用します。
Internet Explorerでは、window.eventオブジェクトのcancelBubbleプロパティにtrueをセットします。
<![CDATA[
function XstopPropagation(evt) {
// W3C DOM準拠ブラウザ
if(evt && evt.stopPropagation) {
evt.stopPropagation();
// Internet Explorer用
} else if(window.event) {
window.event.cancelBubble = true;
}
}
]]>
Submit処理
上記クロスブラウザ対応メソッドを使用した送信前入力チェックを行うプログラム。
フォームの送信ボタンを押したら、送信前に入力チェックを行います。
submitコントロールのタグ内に"onSumbmit="と記述すると、JavaScriptが無効になっている場合は送信できなくなります。
JavaScriptが有効であれば入力チェックを行い、無効であれば、送信だけは行えるようにします。
(1)HTMLではJavaScriptの処理を考慮せず、通常のフォームとして用意する。
(2)javaScript側では、FORMタグに対してsubmitイベントリスナーをセットする。
(3)イベント発生時に処理される関数内で、デフォルト・アクションを抑止する。
(抑止しないと、エラー表示をした直後にフォーム送信が行われてしまう。)
HTML
<![CDATA[
<form action="submit.html" method="get">
<p>何か文字を入れて送信ボタンを押してください。</p>
<input type="text" name="text1" id="text1" />
<input type="submit" name="btn" value="送信" />
</form>
]]>
JavaScript
<![CDATA[
// loadイベントリスナーをセット
XaddEventListener(window, 'load', init);
// HTML文書が読み込まれたときに実行させる処理
function init() {
// フォームにsubmitイベントリスナーをセット
var form = document.forms.item(0);
XaddEventListener(form, 'submit', submitForm);
}
// フォーム送信処理
function submitForm(evt) {
// テキストボックスの要素ノードオブジェクト
var text1 = document.getElementById('text1');
// 入力値をチェック
if( text1.value == '' ) {
alert('この項目は必須です。');
} else if( text1.value.match(/[^\d]/) ) {
alert('この項目には半角数字で入力してください。');
} else {
// フォーム送信
document.forms.item(0).submit();
}
// デフォルト・アクションを抑止
XpreventDefault(evt);
}
]]>
チェックの解除
通常ラジオボタンにチェックを入れてしまうとそれを解除することはできません。
このサンプルでは、解除ボタンを押すことでチェックの状態を解除することができます。
<![CDATA[
<form action="option_text.html" method="get">
<input type="radio" name="gender" value="1" />男性
<input type="radio" name="gender" value="2" />女性
<input type="button" name="relBtn" value="解除" id="relBtn" />
</form>
]]>
<![CDATA[
XaddEventListener(window, 'load', init);
function init() {
var btn = document.getElementById('relBtn');
// 解除ボタンにイベント・リスナーをセット
XaddEventListener(btn, 'click', relRadio);
}
function relRadio(evt) {
var radios = document.getElementsByName('gender');
var checkedradio = null;
for( var i=0; i<radios.length; i++ ) { var elm = radios.item(i); if(elm.checked == true) { elm.checked = false; } } } ]]>
チェックの変更を判定
判定ボタンを押すと、チェックの状態が変更されたどうかを判定します。
<![CDATA[
<form action="default.html" method="get">
<input type="checkbox" name="check" value="1" />チェック1
<input type="checkbox" name="check" value="2" checked="checked" />チェック2
<input type="checkbox" name="check" value="3" />チェック3
<input type="button" name="btn" value="判定" id="btn" />
<input type="reset" name="reset" value="リセット" />
</form>
]]>
<![CDATA[
// loadイベントリスナーをセット
XaddEventListener(window, 'load', init);
function init() {
var btn = document.getElementById('btn');
// clickイベントのリスナーをセット
XaddEventListener(btn, 'click', reportCheckStatus);
}
function reportCheckStatus(evt) {
// チェックボックスのリスト
var checkboxes = document.getElementsByName('check');
// チェック状態の変更を判定
var changed = false;
for( var i=0; i<checkboxes.length; i++ ) { var elm = checkboxes.item(i); if(elm.defaultChecked != elm.checked) { changed = true; break; } } if(changed == true) { alert("状態が変更されました。"); } else { alert("なにも変更されていません。"); } } ]]>
チェック項目のテキスト取り出し
ラジオボタンやチェックボックスのINPUTタグにtitle属性を加えテキストをセットしておくと、JavaScript側からテキストを取り出すことが出来ます。
このサンプルでは、表示ボタンを押すと、選択されているチェックボックスのテキストを表示します。
<![CDATA[
<form action="checkbox_title.html" method="get">
<input type="checkbox" name="hobby" value="1" title="ゴルフ" />ゴルフ<br />
<input type="checkbox" name="hobby" value="2" title="スキー" />スキー<br />
<input type="checkbox" name="hobby" value="3" title="テニス" />テニス
<p><input type="button" name="btn" value="表示" id="btn" /></p>
</form>
]]>
<![CDATA[
// loadイベントリスナーをセット
XaddEventListener(window, 'load', init);
function init() {
var btn = document.getElementById('btn');
// clickイベントのリスナーをセット
XaddEventListener(btn, 'click', reportCheckStatus);
}
function reportCheckStatus(evt) {
// チェックボックスのリスト
var checkboxes = document.getElementsByName('hobby');
// チェック項目を判定し、title属性値を取り出す
var msg = '';
for( var i=0; i<checkboxes.length; i++ ) { var elm = checkboxes.item(i); if(elm.checked == true) { msg += elm.title + "\n"; } } alert(msg); } ]]>
