- ベストアンサー
文字列をテキストフィールドに差し替える方法
こんばんは。 以下のような処理をJavaScriptで実現したいと思っているのですが、 うまく出来ません。 １．HTMLファイル上に「あいうえお」という文字列があったとする。 ２．文字列のとなりのボタンを押すと、「あいうえお」があった場所がテキストフィールドになって、 「あいうえお」という文字が入力済みで編集可能になる。 ３．もう一度ボタンを押すと、テキストフィールドが元通りの普通も文字列に戻る。 以前、どこかのサイトでこのような動きを見たので、 簡単に出来るのかな、と思っていたのですが、、、 お詳しい方がいらっしゃいましたら、知恵を貸していただけないでしょうか？？ 宜しくおねがいします。
- ijhnb6543f
- お礼率100% (65/65)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
かなり適当ですが、こんな感じでどうですか。。 <html> <head> <script type="text/javascript"> function changeField() { var sample = document.getElementById("sample"); var sample_value = sample.innerHTML; sample.innerHTML = "<input type='text' id='txt_sample' value='" + sample_value + "' />"; document.getElementById("btn").innerHTML = "<input type='button' value='innerHTML化' onclick='changeText()' />"; } function changeText() { var txt_sample_value = document.getElementById("txt_sample").value; document.getElementById("sample").innerHTML = txt_sample_value; document.getElementById("btn").innerHTML ="<input type='button' value='テキスト化' onclick='changeField()' />" } </script> </head> <body> <span id="sample">あいうえお</span> <span id="btn"><input type="button" value="テキスト化" onclick="changeField()" /></span> </body> </html>
その他の回答 (2)
- pick52
- ベストアンサー率35% (166/466)
IE限定となり、非推奨である上、フォームでもないのですが 単にコンテンツの編集を可能にするだけなら contenteditable という 属性を使うこともできます。 http://www.tohoho-web.com/html/attr/contenteditable.htm この値をJavaScriptで切り替えれば簡単ですね。 フォームでないので別ページにデータを送信することはできません。
お礼
こんばんは。 アドバイスありがとうございます☆ このような方法でコンテンツを編集できるのですね！ 初めて知りました。 いまは切り替えだけを考えていますが、編集したデータを送信して保存できたらいいなぁ、とも思っていました。 データ送信は出来ないかもしれませんが、 contenteditableという属性があることを知ることができて嬉しいです。 ありがとうございました☆
- fujillin
- ベストアンサー率61% (1594/2576)
<html> <head> <script type="text/javascript"> function change(b,t){ b.value = (b.value=='テキストへ')?'入力フィールドへ':'テキストへ'; var txt = document.getElementById(t); if (b.value=='テキストへ'){ txt.innerHTML = "<input type='text' value='" + txt.innerHTML + "'>"; } else { txt.innerHTML = txt.getElementsByTagName('input')[0].value; } } </script> </head> <body> <span id="text1">あいうえお</span> <input type="button" value="入力フィールドへ" onclick="change(this,'text1')"> <p> <span id="text2">かきくけこ</span> <input type="button" value="入力フィールドへ" onclick="change(this,'text2')"> </body> </html>
お礼
こんばんは。 ANo.1で回答くださった方を同じように、innerHTMLを使うのですね～。 ソースをコピーさせていただいて、試してみましたが、 実現したいっ、って思っていたとおりの動きでした。 JavaScriptって奥が深いですね・・・ ありがとうございました☆
お礼
こんばんは。 まさしく思っていたとおりの動きですっ！ すごーい！！ なるほど、innerHTMLを使うのですね～。 有ありがとうございました☆