formのテキストのポップアップ

質問

いつもお世話になっています。

標題についてご教授願えないでしょうか

<form action="" method="post">
<input type="text" id="id" name="id" value="aaaa" readOnly>
<input type="button" id="id_sub" value="確認">
</form>

上記のような(例)ソースで、
buttonを押下時には別の画面に遷移しますが、
それとは別にtextをクリックすると、textのみがポップアップ表示され
そのtext内容を変更できるよいpluginがあれば教えていただければと思います。

自分で調べた結果、lightbox_me またはform-lightbox , simpleboxがあるのですが
どれが使い勝手がいいでしょうか。
またそれ以外にあれば教えて頂けるとありがたいです。

回答No.2

fujillin

#1です。

ご質問文を見て、本来HTMLに備わっている機能をわざわざスクリプトで実現しようとしているので気になっただけです。
ご提示なさっているライブラリは使ったことがありませんので、参考になるような回答ができずお役に立ちそうもありません。

＞テキストエリアをクリックした場合はクリックしたテキストエリアのみを
＞変更させる事が出来るようにしたいです
readonlyのままにしておきたいのなら、編集用のダイアログのようなものを別に用意して通常時は非表示にしておき、クリック時にそちらへ文字列の内容をコピーして表示・編集、ダイアログを閉じる時に、もとのinput要素へコピーし直すといった処理にしてあげればよろしいのではないでしょうか？

お礼

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

>用意して通常時は非表示にしておき、クリック時にそちらへ文字列の内容をコピ>ーして表示・編集、ダイアログを閉じる時に、もとのinput要素へコピーし直すとい>った処理にしてあげればよろしいのではないでしょうか？

これは考えていて、window.openで別タブ(ブラウザの設定次第)になり兼ねないので、lightbox風に表示できたらと思っています。

一応サイトを見つけて
http://www.xul.fr/javascript/lightbox-form.html
実装中です。

表示位置をずらすか、なんらかしら設定をするかで
動画playerの上に表示させるように設定しようと思います

回答No.1

fujillin

＞textをクリックすると、textのみがポップアップ表示され
＞そのtext内容を変更できる

変更を可能にするのなら、もともとのformの機能がそうなっているはずでなのですが。
readonlyをはずすのでは何か都合が悪いことがあるのでしょうか？

補足

回答有難う御座います。

仕様として
(1)確認ボタンをクリックして、遷移先で変更
(2)テキストエリアをクリック⇒ポップアップ⇒変更

と言うのが仕様なので、両方で変更可能としたいです。

尚、上記に記述しているソースは例なので、
編集項目は一つではなく、複数あるので、

確認ボタンクリック時は遷移先で全て変更が可能となりますが、
テキストエリアをクリックした場合はクリックしたテキストエリアのみを
変更させる事が出来るようにしたいです。