＜div id="strmsg"＞あああああ＜/div＞
のdiv要素をクリックするとdiv要素内がvalue="あああああ"のテキストボックスに変わり、フォーカスをはずすとdiv要素内には編集後の文字が表示され＜div id="strmsg"＞ああいいい＜/div＞のようになる、という処理を行いたいのですがうまくいきません。どう書いたら良いのでしょうか。もしくはサンプルとなるようなサイトをご存知ですか。
はてなブックマークのコメントを記述する箇所はこれに近い処理を行っていますが、はてなブックマークの場合左横のアイコンをクリックするとコメント欄が入力ボックスになり「変更」ボタンを押すと文字表示に戻るので、似ていますが処理は別もので参考になりませんでした。
あくまでdiv要素内をクリックすると入力ボックスになり、そこからフォーカスをはずすと文字表示に戻るという処理を行いたいです。
※コメント欄にコードと補足事項を書きます。
※jQueryやprototype.jsなどのライブラリを利用しない方法で教えてください
No.1
17
6
60pt
flagをたてるのと、テキストボックスにしたあとにフォーカスをテキストボックスにあてることで実現できると思います。
116
102
＜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をあてることなら、削除してよいと思います。
dedara
2008/11/06 04:23:31
2
1
1
1
6
1
worldtravel
うまくいきました。
フォーカスあてるのはfocus()メソッドなんですね。
それとonblurイベントはinpオブジェクト側で発生させないとダメでした。
ありがとうございました。