2008年06月24日

htmlのテキストボックスでEnter押下時の挙動

これ結構制御がめんどくさい。。
IEとMozilla系だと挙動が違う。

個人的には好きじゃないのであまりこういう実装はしないのですが、
IEで、inputタグのsubmitのname/valueを取得する必要がある場合に問題となる。

以下のようなフォームがあるとする。

<form action="test.html">
<input type="text" name="t1" value="v1" />
<input type="submit" name="s1" value="send" />
</form>

IEの場合、submitボタンを押下すると正しく
「test.html?t1=v1&s1=send」
と存在するフォームの値が送信されるが、
t1テキストボックスでのEnter押下だと
「test.html?t1=v1」
となり、submitボタンの値が送信されない。

Mozilla系(FireFox2.0で確認)の場合はsubmitボタン押下でもEnter押下でも正しく
「test.html?t1=v1&s1=send」
と送信される。


ところが以下のようなパターン(テキストボックスが2つ以上)の場合は、IEでもMozilla系でもEnter押下時に問題なく
「test.html?t1=v1&t2=v2&s1=send」
が送信される。

<form action="test.html">
<input type="text" name="t1" value="v1" />
<input type="text" name="t2" value="v2" />
<input type="submit" name="s1" value="send">
</form>

要はテキストボックスがform内にひとつで、Enter押下時のみsubmitボタンの値が送信されないこととなる。
form内にチェックボックスやテキストエリア、hidden等々、テキストボックス以外のinputタグが存在しても、あくまでテキストボックスの数が1か2以上かで挙動が変わることに注意。
type="password"はテキストボックスとして判断される。


また、Enter押下時のsubmitボタンの値は最初に記載されている値のみが送信される。
これはIE、Mozilla系同様に挙動は同じ。(もちろんIEでテキストボックスひとつの場合は送信されない)

以下のフォームの場合、

<form action="test.html">
<input type="text" name="t1" value="v1" />
<input type="text" name="t2" value="v2" />
<input type="submit" name="s1" value="send1">
<input type="submit" name="s2" value="send2">
</form>

それぞれのsubmitボタン押下時は、もちろんそれぞれ
「test.html?t1=v1&t2=v2&s1=send1」
「test.html?t1=v1&t2=v2&s2=send2」
が送信されるが、
Enter押下時は、
「test.html?t1=v1&t2=v2&s1=send1」
となる。
最初に記述されているsubmitボタンがテキストボックスの前に記載されていたとしても同様となる。



次に、Enter押下時のsubmitを抑制したい場合。

<input type="submit" name="s1" value="send1">

<input type="button" onClick="submit();" name="s1" value="send1">
のように変更することで、Enterを押下してもsubmit処理は行われない。
ただし、この場合、s1=send1の値は送信されないので注意すること。


だが、このように変更したとしてもIEの場合で、テキストボックスがひとつの場合は、Enter押下でsubmit処理が発生してしまう。

その際は、ダミーのテキストボックスを追加することで回避することが望ましい。
<input type="text" name="dummy" style="position:absolute;visibility:hidden" />

冒頭のsubmit値が送付されない場合も、この対応を行うことで想定する挙動を行う制御も可能である。
この対応を行う場合は(この例でいうと)「dummy=」の値ももちろん送信されるため、使用していないname値を設定すること。

ネット上では、Enter挙動抑制処理にonKeyPressイベントを利用して改行コード(13)を取得し、javascriptで制御を行うやり方を紹介しているところも多いが、その場合テキストボックスへの入力ごとにJavascript処理が起動されるため望ましくない。
ただし、テキストボックスによって挙動を変える場合(このテキストボックスはEnter押したらsubmitしてもいいが、こっちのテキストボックスはsubmitしたくないなど)は、この制御を行わないといけない。。
posted by だんきち at 00:33| Comment(1) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする

2008年05月14日

tableタグはそんなに悪いのか?

私はシステム屋です。
Webシステムの設計や構築、運用に関するノウハウや技術は持っていると自負しています。
ですが、回りのシステム屋には多いのですが。
htmlはもちろん書けるし、CSSの構造仕様も熟知しているが、デザインセンスがない。。。

ちょと話が逸れそうなので、デザイン云々の話はまた別途。
で、掲題の件。

そういうわけでデザインは外部に頼むのですが、HTMLのtableタグを極端に毛嫌いしているデザイナーが多い気がする。

htmlのレイアウトに関して、流行を見ても、もちろんメンテナンス性を考えてもtableガシガシ書いてレイアウトするのはNGかなと思います。
divタグとcssでレイアウト生成する方がソースの見た目もわかりやすいし、修正も比較的容易ですからね。

ただ、コンテンツとか本文内の本来の意味での「表」を表現するのにもtableを使うことをNGとしている人が多いんじゃないかな、と。
個人的には本来の使い方で使ってるからいいと思うんですが。。
tableタグ=悪って風潮がちょっと同調できない今日この頃。

ま、table使わなくてもHTMLメンテナンス性考えられてて(要は改修が容易で)ちゃんとキレイに表示できればいいんですケド。
個人の好みの問題でしょうかね。。

posted by だんきち at 07:37| Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。