アプリ版：「スタンプのみでお礼する」機能のリリースについて

パスワード入力フォームの実装で、ＩＥ６、７にも対応するには？

解決済

  • 質問者：testid
  • 質問日時：
  • 回答数：5件

入力フォームにデフォルト値でガイド的な文字を入れ
フォームクリックでガイド文字が消え、入力できるようになるものを
このサイトで教えてもらって実装したのですが
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だと思うのですがよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.1

  • 回答者： fujillin
  • 回答日時：

IEやOperaでは、Ｉｎｐｕｔのtype変更が通らないみたいです。


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

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

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

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

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

通報する
お礼日時：2009/05/15 09:09

No.2

  • 回答者： yambejp
  • 回答日時：

パスワードのオブジェクトは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

No.3

  • 回答者： yuu_x
  • 回答日時：

別案。

background-image
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

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

取り急ぎ、お礼まで。

通報する
お礼日時：2009/05/15 09:16

No.4ベストアンサー

  • 回答者： yambejp
  • 回答日時：

ああ、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

No.5

  • 回答者： yuu_x
  • 回答日時：

表記は <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
    • 件
通報する
この回答へのお礼

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

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

通報する
お礼日時：2009/05/18 14:03

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報