WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:formタグ内のinput type=imageのdisabledを有効化したい

0:[投稿] ペキ [2005/11/06 16:41 ] [環境:IE6 CGI]

はじめはformタグ内の<input type=image src="*.jpg">をdisabledで無効化しておいて、一定時間が過ぎたらjavascriptで有効化したいのですが、無理できますでしょうか?


1:[回答] ん [2005/11/07 00:28 ]

可能です。


2:[質問] ペキ [2005/11/07 21:49 ]

<SCRIPT LANGUAGE="JavaScript">
<!--
    var start = new Date();
    start = Date.parse(start)/1000;
    var counts = 5;
    var timerID = 0;
    function CountDown(){
        clearTimeout(timerID);
        var now = new Date();
        now = Date.parse(now)/1000;
        z = parseInt(counts-(now-start),10);
        if(z > 0){
            timerID=setTimeout("CountDown()",500);
        }else{
            document.abcd.btna.disabled = false;
            return false;
        }
    }
//-->
</SCRIPT>


<form name="abcd" action="***" method="post">
<input type="image" src="***.jpg" alt="***" disabled>
</form>


では有効化できないのですが。


3:[回答] B-Cus [2005/11/08 01:07 ]

一発目の CountDown をどこで呼んでいるのですか?


4:[回答] ペキ [2005/11/08 20:49 ]

<form>の後ですが。


5:[回答] ペキ [2005/11/08 21:02 ]

正確には</form>の後です


6:[回答] 老衰 [2005/11/09 00:57 ]

IE6,Moz1.x,FF1.x,Op8.5 で確認しましたが、
document.getElementById("imgbtn").disabled=false;
で出来そうですね。

type="image" はフォーム要素からは除外されるようです。
ここらへんの正確は仕様は未確認ですが、検証した結果は
上記4ブラウザ共そうでした。

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function enableImageButton(n,of) {
    setTimeout(function() {
        document.getElementById("imgbtn").disabled = false;
    },n*1000);
}
</SCRIPT>
</HEAD>
<BODY>
<form onsubmit="return false;">
<input type=text name="txt"><br>
<input type=button name="btn" value="2秒で解除" onclick="enableImageButton(2,this.form)"><br>
<input type="image" src="1.gif" name="imgbtn" id="imgbtn" disabled onclick="alert('enabled ok?')"><br>
</form>


7:[完了] ペキ [2005/11/09 21:52 ]

ありがとうございました。
おかげさまでできるようになりました。

ちなみに、
<form name="abcd" action="***" method="post">
<input type="hidden・・・>
<input type="hidden・・・>
<input type="image" src="***.jpg" alt="***">
<input type="submit ・・・ disabled>
</form>

としたとき、
document.abcd.elements[3].disabled = false;
で動くので、input type="image"はinput要素としては生きているかもしれません。


8:[完了] 老衰 [2005/11/10 00:55 ]

>document.abcd.elements[3].disabled = false;
"3" の要素は、submit ですけど・・・・
はて??

alert(document.abcd.elements.length) ってやってみましたか?
答えが "3" って出てきますよね? "4" が期待値なのに。


9:[完了] ペキ [2005/11/11 17:41 ]

>"3" の要素は、submit ですけど・・・・
もしinput type="image"が除外(?)されるのであれば、2で有効にならなれければおかしいという話です

>答えが "3" って出てきますよね?
普通に3だと思います。


10:[完了] B-Cus [2005/11/12 03:31 ]

>>6
> type="image" はフォーム要素からは除外されるようです。
> ここらへんの正確は仕様は未確認ですが、検証した結果は
> 上記4ブラウザ共そうでした。
これ、おもしろいですねぇ。

以下の URL を見るに、Netscape が elements に type=image を含めなかったため、
互換性を保つために後続のブラウザも従わざるをえなかったのかなと思ったりする
のですが、実際のところはどうなんでしょうか。

 http://www.irt.org/script/211.htm
  According to the Netscape JavaScript Reference manual there isn't a
  form input type of image.

 http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html
  elments array
   This array contains an entry for each object (Button, Checkbox,
   FileUpload, Hidden, Password, Radio, Reset, Select, Submit, Text,
   or Textarea object) in a form in source order.

しかし HTML 的には間違いなく type="image" も INPUT 要素であり、DOM 的にも
ECMAScript Language Binding に「type=image は除外」と書いてあるわけでもない
ので、規格としてはどう折り合いをつけているか興味があります。

>>7
> document.abcd.elements[3].disabled = false; で動くので、
うちの IE6・Firefox では elements[2] としないと動きませんでした。


11:[完了] AC1号 [2005/11/12 09:30 ]

MSDNには
>input type=image objects are excluded from the collection.
と明記されていますね。
http://msdn.microsoft.com/workshop/author/dhtml/reference/collections/elements.asp


12:[完了] AC1号 [2005/11/12 11:36 ]

>>11 の追記ですが、
>Remarks
>For compatibility with existing Web content, however, input type=image objects are excluded.
つまり、IEの仕様は「現存のコンテンツとの互換性のため」ということです。

Geckoの仕様も見てみましたが、
http://developer.mozilla.org/en/docs/DOM:form.elements
特に何も書かれていません。Bugzillaもざっと見てみましたが、該当するものはなさそうです。


13:[完了] B-Cus [2005/11/13 16:35 ]

なるほど、ありがとうございます。

今後新しい type 属性が出てきたら全部 elements から除外されるんですかね。
…って、XFroms や Web Forms 2.0 での対応になるから問題なし(?)


[戻る]