複数のtextareaの保存について

2023/10/29 02:27

このQ&Aのポイント

複数のtextareaの保存方法について説明します。
id="a"で保存されているtextareaの値を取得し、別のtextareaであるid="b"に保存する方法を教えてください。
localStorageを使用して、複数のtextareaの値を保存および取得する方法を説明します。

ベストアンサー

複数のtextareaの保存について

2014/04/28 19:06

下記のコードのようにtextareaが二つあったとします id="a"は保存できましたがid="b"はどうやって保存するのでしょうか？("a", "b")としても無理でしたどのようにすれば複数保存できるのでしょうか？ご回答お願いします <html> <head> </head> <body> <textarea id="a"></textarea> <textarea id="b"></textarea> <script> var a = document.getElementById("a"); window.onload = function() { var body = localStorage.getItem("a"); if (body != null){ a.value = body; } }; a.onchange = function() { localStorage.setItem("a",a.value); }; </script> </body> </html>

DreamyLife_615
お礼率12% (16/124)

JavaScript
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

Kaneyan-R
ベストアンサー率42% (1248/2909)

2014/04/28 21:41 回答No.1

独学・自己流なので・・・掲示されたソースですけど、bに対して何もしてませんが・・・単純にaと同じ事をbに対しても行えばいいのでは？ <script type="text/javascript"> var a = document.getElementById("a"); var b = document.getElementById("b"); window.onload = function() { var body_a = localStorage.getItem("a"); var body_b = localStorage.getItem("b"); if (body_a != null) a.value = body_a; if (body_b != null) b.value = body_b; } a.onchange = function() { localStorage.setItem("a",a.value); } b.onchange = function() { localStorage.setItem("b",b.value); } </script> これじゃダメなの？

関連するQ&A

JSの保存ダイアログについて
以下のコードは簡易メモ的なものですそこに書き込まれた内容を保存できるようにしたいのですがfunction dl()には何を書けばいいのでしょうか？調べてみて function dl(C:\){ var a = document.createElement('a'); a.href = C:\; a.setAttribute('dl', name || 'noname'); a.dispatchEvent(new CustomEvent('click')); } としてみたのですがこれを書き込むと保存ダイアログはおろかtextの保存もできなくなってしまいます <input type="text" id="title"><br><br> <textarea id="memo" rows="8" cols="50"></textarea><br><br> <input type = "button" value="SAVE" onclick="dl();"> <script> var title = document.getElementById("title"); var memo = document.getElementById("memo"); window.onload = function() { var body_title = localStorage.getItem("title"); if (body_title != null) title.value = body_title; var body_memo = localStorage.getItem("memo"); if (body_memo != null) memo.value = body_memo; } title.onchange = function() { localStorage.setItem("title",title.value); } memo.onchange = function() { localStorage.setItem("memo",memo.value); } function dl(){ } </script>
- 締切済み
- JavaScript
JSのコードで保存ができません
以下のコードなのですがnameの部分だけ保存ができませんなぜなのでしょうか <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name1="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> </head> <body> <table border="3" align="center" style=border-spacing:0px;> <tr> <th width="20" height="30">Day</th> <th width="80">name</th> <th width="70">in</th> <th width="100">out</th> <th width="100">total</th> </tr> <tr> <th><input type="text" id="day" style="width : 30px; height : 20px;"></th> <td><input type="text" id="name" style="width : 80px; height : 20px;"></td> <td><input type="text" id="in_m" style="width : 50px; height : 20px;"></td> <td><input type="text" id="out_m" style="width : 50px; height : 20px;"></td> <td><input type="text" id="total" style="width : 50px; height : 20px;"></td> </tr> </table> <script> //保存関係 var day = document.getElementById("day"); var name = document.getElementById("name"); var in_m = document.getElementById("in_m"); var out_m = document.getElementById("out_m"); var total = document.getElementById("total"); window.onload = function() { var body_day = localStorage.getItem("day"); var body_name = localStorage.getItem("name"); var body_in_m = localStorage.getItem("in_m"); var body_out_m = localStorage.getItem("out_m"); var body_total = localStorage.getItem("total"); if (body_day != null) day.value = body_day; if (body_name != null) name.value = body_name; if (body_in_m != null) in_m.value = body_in_m; if (body_out_m != null) out_m.value = body_out_m; if (body_total != null) total.value = body_total; } day.onchange = function() { localStorage.setItem("day",day.value); } name.onchange = function() { localStorage.setItem("name",name.value); } in_m.onchange = function() { localStorage.setItem("in_m",in_m.value); } out_m.onchange = function() { localStorage.setItem("out_m",out_m.value); } total.onchange = function() { localStorage.setItem("total",total.value); } </script> </body> </html>
- 締切済み
- JavaScript
TEXTAREA内の改行位置をinnerHTMLで反映させたい
例えば、 <HTML> <HEAD> <SCRIPT> function send(){ var message = f1.message.value var str = '<HTML>\n<HEAD>\n</HEAD>\n<BODY>\n' str += ''+ message +'\n' str += '</BODY>\n</HTML>' document.frame1.document.body.document.body.innerHTML = str } </SCRIPT> </HEAD> <BODY> <FORM name="f1"> <TEXTAREA rows="10" cols="40" name="message" onChange="send()"></TEXTAREA> </FORM> <IFRAME name="frame1" id="frame1" width="90%" height="350"></IFRAME> </BODY> </HTML> このような記述をして、テキストエリア内に文字を数行にわたって書き込んでも改行はされません。どのようにすれば改行されるようになりますか？ innerHTMLのところをinnerTEXTとして改行位置に<BR>タグが入るようにするのでもかまわないのですが、、、どなたかお分かりになる方、ご教授願います。
- ベストアンサー
- JavaScript
localStorage
今までCookieを使っていたのですが、最近localStorageの存在を知り使ってみました。質問ですが、サンプルを参考に下記のフォームを作りました。無事に値を取り出せ、document.writeで文字の方は表示できるのですが、 img srcの画像の表示方法がわかりません。 document.write("<img src='localStorage.uUrl'>");←これが間違っているのはわかるのですが、 1.htmlのURLフォーム欄に、http://cmm001.goo.ne.jp/img/logo/goo.gif を書いて、2.htmlで表示する方法を教えて下さい。 ----1.html---- <script> (function(){ // 最初にローカルストレージが使えるか調べる。使えない場合は何もしない if (!window.localStorage) return; //　ローカルストレージからフォームにデータを戻す document.getElementById("uName").value = window.localStorage.getItem("uName") || ""; document.getElementById("uUrl").value = window.localStorage.getItem("uUrl") || ""; //　データ送信時にローカルストレージにフォーム内容を保存する document.getElementById("dataForm").addEventListener("submit", function(){ window.localStorage.setItem("uName", document.getElementById("uName").value); window.localStorage.setItem("uUrl", document.getElementById("uUrl").value); alert("データを保存しました"); }, true); })(); </script> <h1>ローカルストレージを利用したフォーム</h1> <form id="dataForm" method="post" action="" onsubmit="return false"> 名前：<input type="text" name="uName" id="uName"><br> URL：<input type="text" name="uUｒｌ" id="uUrl"><br> <input type="submit" value="送信"> </form> ----2.html---- <script> (function(){ //　ローカルストレージからフォームにデータを戻す document.getElementById("uName").value = window.localStorage.getItem("uName") || ""; document.getElementById("uUrl").value = window.localStorage.getItem("uUrl") || ""; document.write(localStorage.uUrl); document.write("<img src='localStorage.uUrl'>"); })(); </script>
- ベストアンサー
- JavaScript
javascriptで別ファイルで変数を取得する。
A.htmlで入力した文字をB.htmlに出るようにしたいのですが、全然出ません。アラートは表示されるのですが、入力欄に何を打っても、　namae と出てしまいます。変数に何も入ってないようです。これを〔javascript〕って入力すれば、アラートに〔javascript〕って出るようにしたいのですが、どうしたらよろしいでしょうか？〔A.html〕 <script type="text/javascript"> var val=namae; window.localStorage.setItem("result", val); </script> <form action="B.htm" id="form1" method="post" onsubmit="check()"> <p>名前<br><input type="text" name="namae" id="buttom" size="28" /></p> <input type="submit" value="送信"/> </form> 〔B.html〕 <script type="text/javascript"> var val = window.localStorage.getItem("result"); alert(val); </script>
- ベストアンサー
- JavaScript
[javascript][IE] textarea内の改行を消す方法を教えてください。
テキストエリア内の改行をreplaceで除去したいのですが、FireFoxではうまくいくのですがIEではうまく動作しません。下記のようなソースです。 IEではどのように書けば良いのでしょうか。 <html> <head> <script type="text/javascript" language="javascript"> function change_box(){ temp = document.getElementById("in").value; temp = temp.replace(/\n/g,""); document.getElementById("out").value = temp; } </script> </head> <body> <form> <textarea id="in" rows="3" > 一行目二行目三行目 </textarea><br /> <textarea id="out" rows="3" ></textarea><br /> <input type="button" value="変換" onclick="change_box()"> </form> </body> </html>
- ベストアンサー
- JavaScript
javascriptで困っています。教えてください
html5でcanvasに描いた画像をsave_buttonを押してlocalStorageで保存して、それをload_buttonをおして読み込もうとしているのですが、うまくいきません。 canvas.toDataURL();でデータを6bit毎に分割できています。それを保存して、 var base64 = window.localStorage.getItem("saveKey");で読み込むこともできています。その後canvasに描画できません。よろしくお願いします。 var canvas = document.getElementById("myCanvas"); $("#save_button").click(function () { 　　 // Canvasからbase64エンコーディングされた画像データを取得する var canvas = document.getElementById("myCanvas"); var base64 = canvas.toDataURL(); // LocalStorageに保存する window.localStorage.setItem("saveKey", base64); }); $("#load_button").click(function () { // LocalStroageからデータを取得する var base64 = window.localStorage.getItem("saveKey"); // Imageオブジェクトを作成し、src属性にデータを設定する var image = new Image(); image.src = base64; image.onload = function(){ // 画像の読み込みが終わったら、Canvasに画像を反映する。 canvas.drawImage(image, 0, 0); } });
- ベストアンサー
- JavaScript
undef datalistがundefinedに
javascript datalistがundef datalistがundefinedになります。 var datalist = { data3: "hoge3", } // str=[]; var a = { data1: "hoge1", data2: "hoge2" } function SaveDataToLocalStorage(datalist) { var a = []; a.push(JSON.parse(localStorage.getItem('session'))); localStorage.setItem('session', JSON.stringify(a)); // Parse the serialized data back into an aray of objects a = JSON.parse(localStorage.getItem('session')) || []; // Push the new data (whether it be an object or anything else) onto the array alert(datalist); a.push(datalist); console.log(datalist); // Alert the array value alert(a+"datalist"); // Should be something like [Object array] // Re-serialize the array back into a string and store it in localStorage localStorage.setItem('session', JSON.stringify(a)); }
- ベストアンサー
- JavaScript
textareaで入力した文字を改行したままで表示したいのですが。
textareaに複数行で入力した文字を改行したままで表示したいのですが改行されずに表示されます。改行したままで表示するのはどうすればいいでしょうか？ <HTML> <HEAD> <STYLE type="text/css">  </STYLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY> <FORM name="nform" > <textarea cols="30" rows="10" name="textN"></textarea> <input type="button" value=" 確認 " onClick="check()"> </FORM> <DIV id="test" style="position:absolute;font-size:24px;"> </DIV> </BODY> </HTML>
- ベストアンサー
- HTML
JavaScriptのGPSについて
現在地の名前を入力し、GoogleMapで表示してその地図を保存するというものを作ったのですが以下のコードで現在地を取得するとなぜかiPhoneでもAndroidでもバルセロナが表示されますなぜなのでしょうか？開発環境はMonacaです <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> </script> </head> <body> <h1>ブックマークMAP</h1> <div id="new_div"> 店名：<input id="name_txt" type="text" value="" size="20" /><br /> <input id="save_btn" type="button" value="記録" /> </div> <div id="list_div">なし</div> <script> function $(id) { return document.getElementById(id); } //初期処理 var items = []; window.onload = function() { if (window.localStorage == undefined && navigator.geolocation == undefined) { alert("HTML5未対応端末です"); return; } //既存リスト表示 var list = localStorage.getItem("shoplist"); if (list == null) { list = ""; }else{ items = list.split("\n"); showItems(); } //記録ボタンを押したときの設定 $("save_btn").onclick = save_btn_clickHandler; }; //ブックマーク一覧の表示 function showItems() { var map_url = "http://maps.google.co.jp/maps?q="; var html = "<ul>"; for (var i in items) { var data = items[i].split("\n"); var name = data[0]; var lat = data[1] var lon = data[2] var link = "<a href='"+map_url+lat+","+lon+"'>"+name+"</a>"; html += "<li>"+link+"</li>"; } html += "</ul>"; $("list_div").innerHTML = html; } //保存ボタンを押したときの設定 function save_btn_clickHandler() { if ($("name_txt").value == "") { alert("場所を入力してください"); return; } //位置情報の取得 navigator.geolocation.getCurrentPosition( successCallback, errorCallback); $("save_btn").value = "現在地取得中" } //成功したとき function successCallback(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; var name_txt = $("name_txt"); //場所+位置情報を保存 var item = name_txt.value + "/t" + lat + "/t" + lon; items.push(item); var list = items.join("\n"); try { localStorage.removeItem("shoplist"); localStorage.setItem("shoplist", list); } catch (err) { alert("保存失敗"); } $("save_btn").value = "記録"; name_txt.value = ""; showItems(); } //失敗したとき function errorCallback(err) { alert("失敗("+err.code+")"+err.message); $("save_btn").value = "記録"; } </script> </body> </html>
- ベストアンサー
- JavaScript