![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
入力フォームにデフォルト値でガイド的な文字を入れ
フォームクリックでガイド文字が消え、入力できるようになるものを
作りたいのですが
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だと思うのですがよろしくお願いします。
No.1ベストアンサー
- 回答日時:
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="パスワード">
すばらしい回答ありがとうございます。
実装できました。
ちなみにキーボード入力が全角になっていても
ID パスワード入力する時に強制的に半角入力にさせるなんてことは
できないですよね^^;
No.2
- 回答日時:
>ちなみにキーボード入力が全角になっていても
>ID パスワード入力する時に強制的に半角入力にさせるなんてことは
>できないですよね^^;
https://developer.mozilla.org/Ja/CSS:ime-mode
そのくらいのことでしたら、というより、フォーム部品に対する表記は label 要素をお勧めします。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …
==================================================================
以下蛇足
・スクリプトの type 属性は必須
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …
・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-2000092 …
http://www.w3.org/TR/DOM-Level-2-HTML/html.html# …
・javascript: ラベルについて。
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi? …
(リンク先の質問内容は今回とは関係ありませんが、ラベルについては参考になります)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- PHP php ログイン 1 2022/11/01 00:24
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- PHP PHPのエラーの解消法について教えて下さい。 1 2023/02/06 10:48
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
フォームの値が0だったら空白...
-
PDFフォームで条件つき金額を表...
-
Acrobat Java Scriptについて教...
-
Javascriptが機能せず原因が分...
-
vbsでフォームに値を入力できない
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
javascriptでhiddenに二次元配...
-
formのfileの値をhiddenでも持...
-
javascriptでクイズ
-
【UWSC】HTML内のある部分を抽...
-
javascriptでセレクトボックス...
-
特定<table>内の<td>の色を変える
-
追加ボタンを押した際に ok ボ...
-
innerHTML内では改行は禁止?
-
submitした値を返したい
-
ファイル選択ダイアログが表示...
-
JavaScriptde途中で、「exit」...
-
1つのform内に2つのsubmitボタ...
-
value内に変数を入れたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onClickとsubmitの処理順序
-
JSPとJavaScriptの連携について...
-
ラジオボタンによるフォームの...
-
テキストボックス入力を半角英...
-
onChange()メソッド
-
フォームから入力すると、入力...
-
テキストボックスを無効にする...
-
フォームの値が0だったら空白...
-
文末の改行コードを削除したい
-
キーボードの数字のキーだけを...
-
テキストボックスのグレーアウト
-
javaでフォーム入力の確認と文...
-
フィールドを有効(enabled?)に...
-
JavaScript のプログラム質問で...
-
Javascript 郵便番号の入力欄で...
-
イベント発生時に入力待ち状態...
-
フォームのテキストをリンク化...
-
貼り付けイベントで値を取得したい
-
メールフォームの入力確認用Jav...
-
dijit.form.ComboBoxについて
おすすめ情報