- ベストアンサー
パスワード入力フォームのガイドの制作するには・・・？
入力フォームにデフォルト値でガイド的な文字を入れ フォームクリックでガイド文字が消え、入力できるようになるものを 作りたいのですが input type="text" のフォームはできましたが input type="password" のフォームに実装すると ガイド文字も●●●●と表示されてしまいます。 これを制作するのは無理なのでしょうか？ 以下はサンプルで作ったソースです。 ------------------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>テスト</title> </head> <body> <div class="id_box"><input type="text" name="id" onfocus="if (this.value == 'アカウントID') this.value='';" value="アカウントID"></div> <div class="pw_box"><input type="password" name="pass" onfocus="if (this.value == 'パスワード') this.value='';" value="パスワード"></div> </body> </html> ------------------------------------------------------------------- たぶんjavascriptだと思うのですがよろしくお願いします。
- testid
- お礼率77% (41/53)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
javascript DOM関数 element.setAttribute()を使ってはどうでしょう <script> <!-- function hide_pwd(pw){ if(pw == 'パスワード'){ document.getElementById("pwd").value =""; document.getElementById("pwd").setAttribute("type", "password"); } } // --> </script> <input id="pwd" type="text" name="pass" onfocus="javascript:hide_pwd(this.value);" value="パスワード">
その他の回答 (1)
- yuu_x
- ベストアンサー率52% (106/202)
>ちなみにキーボード入力が全角になっていても >ID パスワード入力する時に強制的に半角入力にさせるなんてことは >できないですよね＾＾； https://developer.mozilla.org/Ja/CSS:ime-mode そのくらいのことでしたら、というより、フォーム部品に対する表記は label 要素をお勧めします。 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#h-17.9 ================================================================== 以下蛇足 ・スクリプトの type 属性は必須 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/scripts.html#h-18.2 ・get|setAttribute についての IE 問題 http://nanto.asablo.jp/blog/2005/10/29/123294 通常は、各 interface に用意されたプロパティを使うようにすると、上のような制約を受けなくてすみます。 ただし、type プロパティは DOM Level 1 の時点では読み取り専用です。 http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-6043025 http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6043025 ・javascript: ラベルについて。 http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=1941 （リンク先の質問内容は今回とは関係ありませんが、ラベルについては参考になります）
お礼
回答ありがとうございます。 とても参考になりました。 また何かあった時にはよろしくお願い致します。
関連するQ&A
- パスワード入力フォームの実装で、ＩＥ６、７にも対応するには？
入力フォームにデフォルト値でガイド的な文字を入れ フォームクリックでガイド文字が消え、入力できるようになるものを このサイトで教えてもらって実装したのですが Firefoxでは下記のソースで実装できたのですが ＩＥ６とＩＥ７ではフォームに入力すると 入力した文字が●●●●ではなく、そのまま表示されてしまいます。 これを●●●●になるようできないでしょうか？ 以下はサンプルで作ったソースです。 ------------------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>テスト</title> <script> <!-- function hide_pwd(pw){ if(pw == 'パスワード'){ document.getElementById("pwd").value =""; document.getElementById("pwd").setAttribute("type", "password"); } } // --> </script> </head> <body> <div class="id_box"><input type="text" name="id" onfocus="if (this.value == 'アカウントID') this.value='';" value="アカウントID"></div> <div class="pw_box"><input id="pwd" type="text" name="pass" onfocus="javascript:hide_pwd(this.value);" value="パスワード"></div> </body> </html> ------------------------------------------------------------------- たぶんjavascriptだと思うのですがよろしくお願いします。
- ベストアンサー
- JavaScript
- フォームを作成 入力するところの大きさがおかしい
ＩＤ・パスワード入力フォームを作成したのですが、 <input type=text name=ID size=20 value=""> <input type=password name=password size=20 value="" > 大きさが異なります。 どうしてなのか、理由を知りたく思います。 お知恵をお貸し下さい。
- ベストアンサー
- HTML
- VBScript でのフォーム入力
VBScript でWEBサイトにID,PASSワードを入力し自動ログインするプログラムを作成しています。 以下のコードで実行していますが 13行目、1文字目【オブジェクトがありません。】とエラーが出ます。 どのようにすればログインできるか教えてください。 【VBScript】 ==================================================================== '---------- ログイン情報 ID = "myid" PASS = "mypass" '---------- ログイン画面表示 Set myIE = CreateObject("InternetExplorer.application") myIE.Visible = True myPAGE = "http://test1.com/" 'サンプルURLです。実際のURLは別です。 myIE.Navigate myPAGE Do Until myIE.busy = False And myIE.readyState = 4 : Loop '---------- ID/PASSの入力 myIE.Document.getElementById("login_id ").Value = ID myIE.Document.getElementById("password").Value = PASS myIE.Document.getElementById("checkbox").Checked = True Set objINPUT = myIE.Document.getElementsByTagName("INPUT") 'ループで頭からテキストが ログイン を探す For n = 0 To objINPUT.Length - 1 If objINPUT(n).Value = "ログイン" Then objINPUT(n).Click Exit For End If Next Set objINPUT = Nothing Set myIE = Nothing ==================================================================== 【ログインしたい http://test1.com/ ページの該当ソース】 ==================================================================== <form action="./login.php" method="post"> <div class="noti " width="900px"> <div> パスワードは5回連続で間違えると停止します。 </div> </div> <p> <label>ログインID</label> <input class="text-input" type="text" name="login_id" /> </p> <div class="clear"></div> <p> <label>パスワード</label> <input class="text-input" type="password" name="password" /> </p> <div class="clear"></div> <p id="remember-password"> <input type="checkbox" checked />パスワードを記憶 </p> <div class="clear"></div> <p> <input class="button" type="submit" value="ログイン" /> </p> </form> ==================================================================== よろしくお願いいたします。
- ベストアンサー
- その他（プログラミング・開発）
- フォームに入力した値の制御について
フォームに入力した値の制御について いろいろと調べてみたのですが、 どうすれば良いか分からないので、 質問をさせて頂きました。 【概要】 フォームの[text]と[textarea]に入力をしてもらいたい 入力値のサンプルを表示されるようにしました。 カーソルを[text]と[textarea]に入れると、 入力値のサンプルの表示が消えて入力出来るようにしました。 【やりたい事】 [text]と[textarea]に入力をしてもらった値を、 最終的にtextareaに出力させるようになっています。 何も入力せず出力をさせると、サンプル値は出力されてしまいます。 [text]と[textarea]に入力をした値のみ出力させることは可能でしょうか。 ご教授頂ければと思います。 よろしくお願いいたします。 【ソース】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN Frameset" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <script type="text/javascript"> <!--ログ生成スクリプトを取得--> function textoutput(formObj) { <!--text01を取得--> var text01 = formObj.elements["text01"].value; <!--text02を取得--> var text02 = formObj.elements["text02"].value; <!--textarea01を取得--> var textarea01 = formObj.elements["textarea01"].value; <!--textarea02を取得--> var textarea02 = formObj.elements["textarea02"].value; <!--出力データを作成--> var text = ''; <!--text3データを作成--> if(text01!==""){ text += '質問1：' + '\n'+ text01 + '\n'; } <!--text2データを作成--> if(text02!==""){ text += '質問２：' + '\n'+ text02 + '\n'; } <!--textarea01データを作成--> if(textarea01!==""){ text += '質問３：' + '\n'+ textarea01 + '\n'; } <!--textarea02データを作成--> if(textarea02!==""){ text += '質問４：' + '\n'+ textarea02 + '\n'; } <!--出力データを作成--> formObj.elements["output"].value=text; } </script> </head> <body> <form name="form01"> <strong>・諮問１：</strong><br> <input type="text" name="text01" value="１入力してください" id="p1" size="30" class="disabled" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"><br> <strong>・諮問2：</strong><br> <input type="text" name="text02" value="2入力してください" id="p2" size="30" class="disabled" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"><br> <strong>・諮問3：</strong><br> <textarea name="textarea01" id="textarea01" cols="60" rows="5" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> ３入力してください </textarea><br> <strong>・諮問4：</strong><br> <textarea name="textarea02" id="textarea02" cols="60" rows="5" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> ４入力してください </textarea><br> <strong>・出力結果：</strong><br> <input type="button" value="ログ出力" onClick="textoutput(this.form);"> <br> <textarea cols=60 rows=20 name="output" ></textarea> </form> </body> </html>
- ベストアンサー
- JavaScript
- フォームでのタグについて
検索フォームに IDを入力して ブログを表示するようなURLでリンクしたいと考えています。 <form method="get" action="http://blog.goo.ne.jp/" class="search" target="_blank"> <div> <input type="text" name="ID" class="textBox"><input type="hidden" value="/"> <input type="submit" value="検索" class="btn"> </div> </form> 上のようなhtmlタグを作りましたが うまく http://blog.goo.ne.jp/synchro-night/ http://blog.goo.ne.jp/(IDをフォームで入力)/ のようなリンクができません。 どのように変えればよいのでしょうか？ JavaScriptで する必要があるのでしょうか？
- ベストアンサー
- HTML
- WEBの入力フォームについて
昨年の同じ時期に入力フォームについて質問し、回答をいただいたのですが、少し使い勝手を改善したく再度質問いたします。 テキストボックス Ａ ラジオボタン １、２、３ テキストボックス Ｂ テキストボックスＡに入力後、ラジオボタンで２を選択すると、テキストボックスＢに自動的に入り、１及び２の場合はブランク（入力不可）というものです。 以下が前回回答をいただいたものです。 改善したいところは、最初にこのファイルを呼び出したときにはテキストボックスＢに入力できてしまうところです。その後ラジオボタンを動かすと２選択以外には入力はできなくなりますが、はじめから入力不可にしたいと思っています。（ラジオボタンの初期値は１です。） また、２を選択後、テキストボックスＢにカーソルを当てると左下のステータスバーにエラーと表示されるのはしかたのないことでしょうか。（テキストを修正することもありえるので、２を選択した場合は自動で入りつつ修正もできるようにしたいです。） 以上、よろしくお願いします。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY> <script language="JavaScript" type="text/JavaScript"> function copyab(f){ f.elements["name3"].disabled=false; f.elements["name4"].disabled=false; f.elements["name3"].value=f.elements["name1"].value f.elements["name4"].value=f.elements["name2"].value; } function clearb(f){ f.elements["name3"].value=""; f.elements["name4"].value=""; f.elements["name3"].disabled=true; f.elements["name4"].disabled=true; } </script> <FORM>A1 <INPUT type="text" name="name1"> A2<INPUT type="text" name="name2"><BR> 区分 <INPUT name="address" type="radio" value="1" onclick="clearb(this.form)" checked> 1 <INPUT name="address" type="radio" value="2" onclick="copyab(this.form)"> 2 <INPUT name="address" type="radio" value="3" onclick="clearb(this.form)"> 3<BR> B1<INPUT type="text" name="name3" onfocus="if (!agree)this.blur();" onchange="if (!agree)this.value='';"> B2<INPUT type="text" name="name4" onfocus="if (!agree)this.blur();" onchange="if (!agree)this.value='';"> </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
- サイト検索窓の文字色を、触れる前と入力する時で色を変えようとしています
サイト検索窓の文字色を、触れる前と入力する時で色を変えようとしていますが、 うまくいかずに非常に困っております。 今のhtmlがこれです。 -------------------- <form name="myform" action="http://www～～" method="post"> <input type="text" name="search_name" value="サイト内検索" id="uid" onfocus="if (this.value == 'サイト内検索') { this.value='' }" onblur="if (this.value == '') { this.value='サイト内検索' }" /> <input type="submit" value="検索" name="button" id="btn" class="fadeBtn" /> </form> -------------------- cssで<input>のcolorを指定したら、 入力する前の表示も、入力した時の表示も同じ色になりました。 そこで、調べた結果以下のようにonfocusとonblurにcolorを指定したのですが、 うまくいきませんでした。 -------------------- <form name="myform" action="http://www～～" method="post"> <input type="text" name="search_name" value="サイト内検索" id="uid" onfocus="if (this.value == 'サイト内検索') { this.value='' } { this.style='color:#000000' }" onblur="if (this.value == '') { this.style='color:pink' } { this.value='サイト内検索' }" /> <input type="submit" value="検索" name="button" id="btn" class="fadeBtn" /> </form> -------------------- javaが必要なのでしょうか？ javaには詳しくないため、必要でしたら教えていただきたいです。 どうぞご回答お願いします・・・。
- ベストアンサー
- JavaScript
- inputとtextareaに
今、フォーム部品に以下のような指定をしています。 <input type="text" value="デフォルト値" onfocus="if(this.value==this.defaultValue)this.value = ''" onblur="if(this.value=='') this.value=this.defaultValue"> このonfocus以降の指定をinput type="text"とtextareaのみに自動で追加しようとしているのですが、調べてもよくわからなかったため質問することにしました。 このような指定はjavascriptでできますか？
- ベストアンサー
- JavaScript
- JAVASCRIPTで、ボタンを押したら 入力項目を追加できるようにしたい。
FORMタグ内に下記のようなの入力項目があります。 JAVASCRIPTを使って、追加ボタンを押したときに、下記の部分を2個、3個と追加させたいと思っております。 (最初から複数個分の入寮力フォームを用意しておくと、見た目が良くないため、追加ボタンで随時追加するようにしたい） どのようなjavascriptを書けばよいか、ご教授願えませんでしょうか。 どうぞよろしくお願い致します。 <select> <option value=" " selected="selected">選んでください</option> <option value="テスト1">テスト1</option> <option value="テスト2">テスト2</option> <option value="テスト3">テスト3</option> </select> <br class="spacer"> </div> <div class="forms"> <label>テーブル1</label> <input type="text" name="textfield" id="textfield" /> <label>テーブル2</label> <input type="text" name="textfield" id="textfield" /> <label>テーブル3</label> <input type="text" name="textfield" id="textfield" class="short" /> <div class="btns"> <input type="button" value="送信" /> <input type="button" value="さらに入力項目を追加する" /> <input type="button" value="クリア" /> </div>
- ベストアンサー
- JavaScript
- ブログフォームが表示されない！
いつも大変お世話になり誠にありがとうございます。 標記の件。 下記ソースコードで名前がform.phpです。 ブログフォームが表示されません。 どうすれば表示されるでしょうか？ ご回答のほど宜しくお願い申し上げます。 <body> <div class="v_line_fix"> <h1>Blog K・T</h1> <h2><a href="index.html">トップページ</a></h2> <h2>ブログフォーム</h2> <form action="blog_create.php" method=_POST> <p> ペンネーム: <input type="text" name="name" value=""></p> <p> タイトル: <input type="text" name="name" value=""></p> <p> カテゴリー: <input type="text" name="name" value=""></p> <p>ブログ本文: <textarea name="content" id="content" cols="50" rows="80"></textarea><br> <input type="submit" value="確認画面へ"> </form> </body>
- ベストアンサー
- PHP
お礼
すばらしい回答ありがとうございます。 実装できました。 ちなみにキーボード入力が全角になっていても ID パスワード入力する時に強制的に半角入力にさせるなんてことは できないですよね＾＾；