気まま日記(kimamanikki)

気の向くままに、のんびり更新しますヽ(´∀`)ノ

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
08


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

submitボタンのデフォルト設定を回避する

htmlのformタグ内で記述するsubmitボタンだけど、これはブラウザの仕様として、「一番最初に書かれたsubmitボタン」がデフォルトボタンとなるようになっている。

デフォルトボタンとは、Enterキー押下時にクリック動作を代替出来るボタンのこと。
htmlの場合、(タブキーで他のボタンに移動した場合を除いて)formタグで囲まれた部品上でEnterキーを押した場合、(textareaを除く)submitボタンが押されたことになる。

このデフォルトボタンは賛否両論あるようで、例えば次のような画面。

Sample1


この場合、デフォルトボタンは「戻る」になる。

これは入力フォームが一つなので、例えばテキストボックスで間違えてEnterキーを2回押してしまってもそんなに被害はないと思う。

ただ次の場合はどうだろう?

Sample2
情報1:
情報2:
情報3:
情報4:
・・・
情報n-1:
情報n:

 1  2  3  4

この場合、間違えてEnterを押してしまったら、入力途中だったフォーム情報が「戻る」ボタンを押した事になってしまい消えてしまう・・・なんて感じに。

単純な動作であれば(キー入力操作に慣れた人であれば)デフォルトボタンでEnterキーを押したらサーバに送信ってした方が楽なのかもしれない。

ただ複数の項目だったり、その画面アクションをしてしまう事で入力情報が消えるような場合、このデフォルトボタンの動作はまさに「小さな親切、大きな迷惑」だったりするのです。
(入力作業中の誤動作等も考えられるし・・・)

で、色々調べてみた結果、対策としては、

1.影響のないボタンをデフォルトに設定する
「戻る」・「登録」という並び順でなく、「登録」・「戻る」という並びにする。
「登録」に入力チェックやサーバチェックが実装されていれば、入力途中で送られても、入力途中のエラー(必須や桁数など)を拾う事になり、入力情報を再度入力フォームに戻すことも可能。

2.submitボタンをbuttonまたは画像にする
これはもうそのまま。
submitボタンを実装せずに画像またはbuttonのonclickイベントハンドラで、対象フォームのsubmit()を呼び出す方法。
ただし、submit()を使用すると、ブラウザによってはformタグのonsubmitイベントハンドラが実行されない場合があるらしい

3.「プレビュー」「確認」など、情報確定前にワンクッションを置く
ユーザーからすればクリック回数は増えるが、動作としては安心。
特にマイナス点は思いつかないが、強いて言えば殆どの場合画面遷移が増えるところか?

この中で1.と3.は単純に作りこんでいくしかないが、2.に関してはちょっとクライアント側でJavaScriptの処理が必要。

例としてはこんな感じ。

HTML
JavaSctript
function backSubmit() {
    // submitで送信せず、clickでサブミットボタンを押した事にする
    document.getElementById("back").click();
}

これは見た目は変えたくないけど、デフォルトボタンの位置を変えたい場合は有効だと思おう。

まぁ殆どの場合はプレビューや確認画面をはさんだり、一番誘導したい画面遷移ボタンをデフォルトにするんだろうけど。

ちなみにというか当然というか、これはStrutsのカスタムタグとかでももちろん使えます。

まぁPHPでも何でも、HTMLの出力結果が上記のようになれば使えるってことなんだけど・・・


Comments

Leave a Comment


Body

カウンター
セルフィ

 
Twitter



 
 
クラッチ作品集
 
 
プロフィール

クラッチ

気まま日記バナー

・クラッチ
このブログの管理人

 
 
管理人へメール
メールフォームを開く
 
 
ブロとも申請フォーム
 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。