ajaxというかjavascriptで


<div id="strmsg">あああああ</div>

のdiv要素をクリックするとdiv要素内がvalue="あああああ"のテキストボックスに変わり、フォーカスをはずすとdiv要素内には編集後の文字が表示され<div id="strmsg">ああいいい</div>のようになる、という処理を行いたいのですがうまくいきません。どう書いたら良いのでしょうか。もしくはサンプルとなるようなサイトをご存知ですか。

はてなブックマークのコメントを記述する箇所はこれに近い処理を行っていますが、はてなブックマークの場合左横のアイコンをクリックするとコメント欄が入力ボックスになり「変更」ボタンを押すと文字表示に戻るので、似ていますが処理は別もので参考になりませんでした。

あくまでdiv要素内をクリックすると入力ボックスになり、そこからフォーカスをはずすと文字表示に戻るという処理を行いたいです。

※コメント欄にコードと補足事項を書きます。
※jQueryやprototype.jsなどのライブラリを利用しない方法で教えてください

回答の条件
  • 1人5回まで
  • 登録:2008/11/06 03:47:35
  • 終了:2008/11/06 10:38:55

ベストアンサー

id:karaki No.1

karaki回答回数17ベストアンサー獲得回数62008/11/06 10:12:45

ポイント60pt

flagをたてるのと、テキストボックスにしたあとにフォーカスをテキストボックスにあてることで実現できると思います。

<script type="text/javascript">
    var flag = false;
  function changeinput(){
        if (flag) return ;
        flag = true;
    var msg = document.getElementById('strmsg');
    var msgtext = msg.innerHTML;
    msg.innerHTML = "<input type=\"text\" id=\"inp\" value=\"" + msgtext + "\">";
    var inp = document.getElementById('inp');
    inp.select();
        inp.focus();
  }

  function changetext(){
    var inp = document.getElementById('inp');
    var inpval = inp.value;
    var msg = document.getElementById('strmsg');
    msg.innerHTML = inpval;
        flag = false;
  }
</script>
<body>
<div id="strmsg" onclick="changeinput();" onblur="changetext();">あああああ</div>

inp.select()の意図がfocusをあてることなら、削除してよいと思います。

id:dedara

うまくいきました。

フォーカスあてるのはfocus()メソッドなんですね。

それとonblurイベントはinpオブジェクト側で発生させないとダメでした。

ありがとうございました。

2008/11/06 10:37:51
  • id:dedara
    ちなみにコードは以下のように書きました。

    <script type="text/javascript">
      function changeinput(){
        var msg = document.getElementById('strmsg');
        var msgtext = msg.innerHTML;
        msg.innerHTML = "<input type=\"text\" id=\"inp\" value=\"" + msgtext + "\">";
        var inp = document.getElementById('inp');
        inp.select();
      }

      function changetext(){
        var inp = document.getElementById('inp');
        var inpval = inp.value;
        var msg = document.getElementById('strmsg');
        msg.innerHTML = inpval;
      }
    </script>

    <body>
    <div id="strmsg" onclick="changeinput();" onblur="changetext();">あああああ</div>

    入力ボックスに変わる所まではうまくいきます。IEとFirefoxではフォーカスをはずしても入力ボックスのままです。Operaの場合フォーカスをはずすと文字表示状態に変わりますが入力ボックスの状態のとき編集が一切できなくなります。
    あと入力ボックスの状態で再度クリックすると当たり前ですが再度changeinput()が呼ばれおかしくなります。
  • id:worldtravel
    綺麗ではないですが...

    <html>
    <head>
    <script type="text/javascript"><!--
    function $(tagId){
    return document.getElementById(tagId);
    }
    window.onload = function(){
    $('strmsg').onclick = changeInput;
    };
    function changeInput(){
    var ele1 = $('strmsg');
    ele1.innerHTML = '<input id="hoge" type="text" value="' + ele1.innerHTML + '" />';
    ele1.onclick = "";
    var ele2 = $('hoge');
    ele2.focus();
    ele2.onblur = changeText;
    }
    function changeText(){
    var ele1 = $('strmsg');
    var ele2 = $('hoge');
    ele1.innerHTML = ele2.value;
    ele1.onclick = changeInput;
    }
    --></script>
    </head>

    <body>
    <form>
    <div id="strmsg" style="width:150px;height:25px;">あああああ</div>
    </form>
    </body>
    </html>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません