人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ajaxというかjavascriptで

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

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

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

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

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

●質問者: dedara
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:Ajax JavaScript jQuery prototype.js あい
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● karaki
●60ポイント ベストアンサー

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をあてることなら、削除してよいと思います。

◎質問者からの返答

うまくいきました。

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ