入力フォームにデフォルト値でガイド的な文字を入れ
フォームクリックでガイド文字が消え、入力できるようになるものを
このサイトで教えてもらって実装したのですが
Firefoxでは下記のソースで実装できたのですが
IE6とIE7ではフォームに入力すると
入力した文字が●●●●ではなく、そのまま表示されてしまいます。

これを●●●●になるようできないでしょうか?

以下はサンプルで作ったソースです。
-------------------------------------------------------------------
<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だと思うのですがよろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

ああ、classもあるのね


classはIEでsetAttributeできないので、前回使ったのと
おなじパターンでやります。

ちょっと検証してみたらtry~catchだとNNで動かないようなので
以下のように書き換えました。

<style>
.test{
height: 15px;
width: 206px;
margin: 0px;
padding: 0px;
margin-top: -1px;
margin-bottom: -1px;
}
</style>
<script>
function hide_account(obj){
if(obj.value == 'アカウントID') obj.value="";
}
function hide_pwd(obj){
if(obj.value == 'パスワード'){
var p=obj.parentNode;
var newobj=document.createElement("input");
newobj.setAttribute("type","password");
newobj.setAttribute("class",obj.getAttribute("class"));
if(!newobj.getAttribute("class")) var newobj=document.createElement("<input type='password' class='"+obj.className+"'>");
newobj.setAttribute("name",obj.getAttribute("name"));
p.insertBefore(newobj,obj);
p.removeChild(obj);
newobj.focus();
}
}
</script>
<div><input type="text" class="test" name="id" onfocus="hide_account(this);" value="アカウントID"></div>
<div><input type="text" class="test" name="pass" onfocus="hide_pwd(this);" value="パスワード"></div>
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます!

意図したものができました。
もしまた何かあった時に、お手すきでございましたら
よろしくお願い致します。

お礼日時:2009/05/15 10:16

表記は <label> だと思うんだけどね。



http://template.b-cures.net/dl/form/index5.html
表示されっぱが気になる場合は、
input:focus { background-image : none; }

===============================================================
蛇足

obj.value == 'アカウントID' → obj.value == obj.defaultValue

newobj.setAttribute("class",obj.getAttribute("class"));

newobj.className = obj.className;

http://oshiete1.goo.ne.jp/qa4958379.html

p.insertBefore(newobj,obj);
p.removeChild(obj);

p.replaceChild( newobj, obj );
    • good
    • 0
この回答へのお礼

なるほど!!
こういう手もあるんですねぇ!

画像だとデザイン的にも凝ったものを作れるし
CSSで調整するので各ブラウザのデザインの統一にもなりますし
すばらしいです!
ありがとうございました!

お礼日時:2009/05/18 14:03

別案。

background-image
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

ただ、私の知識と経験不足によりご回答の意味が
わかりませんでした。もしお手すきな時がありましたら
詳しくソースなど頂けたらと思います。

取り急ぎ、お礼まで。

お礼日時:2009/05/15 09:16

パスワードのオブジェクトはfocusしたときに削除してしまって


あたらしいオブジェクトを起こしてみては?
こんな感じで・・・

<script>
function hide_account(obj){
if(obj.value == 'アカウントID') obj.value="";
}
function hide_pwd(obj){
if(obj.value == 'パスワード'){
var p=obj.parentNode;
var newobj=new Object();
try{
newobj=document.createElement("<input type='password'>");
newobj.setAttribute("width",obj.offsetWidth);
newobj.setAttribute("height",obj.offsetHeight);
}catch(e){
newobj=document.createElement("input");
newobj.setAttribute("type","password");
}
newobj.setAttribute("name",obj.getAttribute("name"));
p.insertBefore(newobj,obj);
p.removeChild(obj);
newobj.focus();
}
}
</script>
<div><input type="text" name="id" onfocus="hide_account(this);" value="アカウントID"></div>
<div><input type="text" name="pass" onfocus="hide_pwd(this);" value="パスワード"></div>
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
ただ、今回<input>にCSSで長さやマージンを設定していて
yambejpさまのソースでやってみたところ
フォーカスした時にCSSが適用されなく、テキスト入力エリアが
もどってしまいまいした。
-----------------------------------------------------------
<style type="text/css">
.test{
height: 15px;
width: 206px;
margin: 0px;
padding: 0px;
_margin-top: -1px;
_margin-bottom: -1px;
}
</style>
<input type="text" class="test" name="pass" onfocus="hide_pwd(this);" value="パスワード">
-----------------------------------------------------------
クラスを反映させたままのフォーカスで消す処理は
できるのでしょうか?

お礼日時:2009/05/15 09:15

IEやOperaでは、Inputのtype変更が通らないみたいです。


(=setAttribute("type", "password");の部分)
それなので、もとのHTMLのtype="text"のままなので、そのまま表示されてしまいます。

無理やりやるなら、INPUTタグを書き直してしまえば可能みたい。
例えば、引数をthisにしておいて
function test(e){
div=e.parentNode;
div.innerHTML='<input type="password" ・・・・
みたいな感じ。
(自分自身を書き直すので、かなり気持ち悪いですが)

ただし、IE6ではこの後で div.firstChild.focus(); としてもフォーカスが戻らない現象が起こりました。(Operaでは問題ありませんが)

試行錯誤してみると、IEでは他の要素に一度フォーカスを移動させてから戻すと、どうやらフォーカスが戻るみたいです。
とりあえずの解決は、それ用にhiddenなどでダミーのinputを作っておくことかな?(他に良い方法があるかも知れませんが…)
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
私も試行錯誤しております。
何かいい案がありましたら、またお待ちしております。

お礼日時:2009/05/15 09:09

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング