- 2007-09-23 (日)
- 技術
まず前提としてinput type="file"のボタンの文字を変更することは出来ない。
そこで、それっぽいことを他の方法で実現する方法をご紹介。
いたって単純な話だが、基本としてはinput type="file"を「visibility:hidden」で見えなくしてしまう。
「display:none」でも良し。
そして表向きとしてinput type="text"とinput type="button"を用意しておく。ユーザはこの表向きの部分をinput type="file"の挙動だと判断して操作することになる。
以下のソースを見ていただければ一目瞭然だが、
- ユーザが参照ボタンをクリックする。
- ボタンのonclickでinput type="file"のclickメソッドを呼び出す
- ファイルの参照画面が表示される
- 選んだファイル名をinput type="text"のvalueにセットする
これで一見はinput type="file"に見えるが、ボタンの文字を好きに変えることができる。
意外と簡単ですね。
ただこの方法は、clickメソッドをJavaScriptから呼び出しているのでIE限定です。
<script language="JavaScript">
<!--function JS_Click(){
var file = document.getElementById("file");
file.click();document.getElementById("aaa").value = file.value;
}
//-->
</script>■input type="file"の場合<br>
<input type="file" value="" onclick="" id="file" />
<br><br>
■input type="text"と"button"の場合<br>
<input type="text" value="" id="aaa"> <input type="button" value="test" onclick="JS_Click();"><br>
<input type="file" value="" onclick="" id="file" style="visibility:hidden">
【関連する記事】
- onloadを待たずに特定のエレメントに処理を実行する方法
- JavaScriptやCSS、Railsなど使えそうなチートシートいろいろ
- JavaScriptで角丸を実現している「Nifty Corners Cube」
- Newer: GeekすぎるPC環境
- Older: 本を所有するということについて
Comments:0
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/458
- Listed below are links to weblogs that reference
- input type="file"のボタンのCaptionを変更する方法 from HouseTect, JavaScripter Blog
