javascriptでフォームをカスタマイズしました。
ソース上は単純にinput type=file id="btnUpload"のタグのみがあるのですが、jsが読み込まれると、元々あったタグの上に、ファイルパス表示用のinput type=text id="dummy_txt" とアップロードボタン用のimg id="dummy_btn"が被せられます。
操作していて気付いたのですが、Windows7でIE9の環境だと投稿ボタンを押すと、フォーカスが#dummy_txtに飛んでしまい、#btnUploadの値が消えてしまいます。
そのまま投稿ボタンを押すと、ファイルパスがなくなっていることから選択されていないというエラーになってしまいます。
このファイルパスが消されないようにするための方法はありますか?
No.3ベストアンサー
- 回答日時:
こんにちは。
補足ありがとうございました。
ダウンロードして試してみました。
私のWindows7+IE9ではきちんとファイルも送信されていました。
>そのまま投稿ボタンを押すと、ファイルパスがなくなっていることから選択されていないというエラーになってしまいます。
何かエラーチェック等行なっているのでしょうか。
その辺もわかると解決できるかもしれません。
ただ、特定の環境とのことで、こういったプラグインのようなものを使う場合は修正が難しいかもしれません。
この回答への補足
>そのまま投稿ボタンを押すと、ファイルパスがなくなっていることから選択されていないというエラーになってしまいます。
何かエラーチェック等行なっているのでしょうか。
これについてですが、送信ボタンを押すと、#dummy_txtにフォーカスが遷移してしまい、元々の#bt-uploadにあったファイルパスが消えちゃってるようなんです。。。
このフォーカス遷移をさせないようにすれば、またなんとかなるかもとは思うのですが。。。
>私のWindows7+IE9ではきちんとファイルも送信されていました。
本当ですか!?
>何かエラーチェック等行なっているのでしょうか。
電話番号や、担当者名などの必須入力チェック等を行っております。
その辺の処理を担当している人間に聞いてみます。
ありがとうございます!
No.2
- 回答日時:
何をしているのか理解できていないjavascriptなどを利用するよりも、普通にHTMLで記しておいて、デザイン的にはCSSを利用して表示するのがよろしいのではないでしょうか。
javascriptはオフにしている閲覧者もいるので、頼りすぎると本来の機能が果たせなくなる場合があります。
No.1
- 回答日時:
こんにちは。
>javascriptでフォームをカスタマイズしました。
どのようなフォームをどのようなJavaScriptでカスタマイズしたのでしょうか。
情報が少なすぎて回答が付きにくいと思います。
もう少し詳しい情報を補足ください。
説明不足ですみません。カスタマイズしたと表現しましたが、niceform.jsというものを利用しました。
IE8や9でも動いたので、利用してたら、Windows7+IE9がダメだったので、今回の質問として投稿させてもらいました。
フォームの内容は個人のプロフィールを掲載するための登録ページになってまして、画像をアップロードできるようにしています。
niceform.jsを使用しなければ問題ないのですが、デフォルトのフォームパーツだと味気ないですし、input type=fileをCSSだけでデザインするのは、ブラウザ毎に違うため、デザイン通りにならないですし。。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript javascriptで入力フォームが空欄の時にアラートによるエラーを出すコードを書いています。 2 2023/06/13 17:58
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jsファイルを閲覧者がダウンロ...
-
テキストファイルの更新日時を取得
-
外部ファイルからの値の取得
-
contenteditableで編集した内容...
-
JSでファイル数取得
-
htmlのfileタグに自動で値を入...
-
csvファイルを読み込み、該当項...
-
テキストファイルの一行目から...
-
Temporary Internet Filesにあ...
-
javascriptファイルの読み込み
-
ローカルフォルダにあるPHPファ...
-
【JavaScript】ソースのコメン...
-
ASP(VBS) ←→ JavaScript の変数...
-
iframeで開かれた時だけredirect
-
PDFフォームで条件つき金額を表...
-
至急お願いします!javascript:...
-
jsでルートディレクトリより上...
-
javascript 文字列の最後から1...
-
Visual Basic 6.0 のテキストボ...
-
ラベルの色がかわってくれない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
csvファイルを読み込み、該当項...
-
JavascriptでのExcel起動について
-
htmlのfileタグに自動で値を入...
-
javascriptでフォルダ内のファ...
-
contenteditableで編集した内容...
-
JSでファイル数取得
-
テキストファイルの更新日時を取得
-
ページを一回だけリロードさせ...
-
JAVAスクリプトで商品コードか...
-
javascriptでエクセルデータ読...
-
InDesign javascript について
-
javascriptの効かないサーバー...
-
Win版IllustratorCS3でJavascri...
-
HTMLファイルに更新日時を自動...
-
ローカルフォルダにあるPHPファ...
-
正規表現でファイル名の抽出
-
ファイルの有無を調べる
-
<input type="file">のイベント...
-
Temporary Internet Filesにあ...
-
ホームページ内の新着情報を簡...
おすすめ情報