\r\n\r\n\r\n\r\n
\r\n \r\n \r\n
\r\n\r\n\r\n\r\n### 試したこと\r\n\r\nlocalStorage.setItem('key', document.getElementById(\"text1\").value);\r\nlet data = localStorage.getItem('key');\r\ndocument.getElementById(\"text1\").value = data;\r\n調べたのですが、出てきたのはlocalStorage.setItemと言う関数でしたり、value属性に\"<%= strName %>\"を入れてみたのですが、保持できませんでした。\r\n\r\n### 補足情報(FW/ツールのバージョンなど)\r\n\r\nバージョンなどもわかりませんが自分はファイルを作り、そこで新規作成し、htmlファイル?を作りました。そのファイルをVSコードで開きプログラムをしています。","answerCount":2,"upvoteCount":0,"datePublished":"2021-03-20T04:05:52.667Z","dateModified":"2022-01-12T10:55:45.698Z","suggestedAnswer":[{"@type":"Answer","text":"シンプルに\r\n```javascript\r\n\r\n```\r\nから\r\n```javascript\r\n\r\n```\r\nじゃだめなんです?\r\nテキストボックスに残りますが...","dateModified":"2021-03-20T05:32:34.918Z","datePublished":"2021-03-20T05:32:34.918Z","upvoteCount":0,"url":"https://teratail.com/questions/328868#reply-454984","comment":[{"@type":"Comment","text":"それだとクリックという文字しか残りません。自分は入力フォームなどで間違って入力された際に間違って入力された値を残したい。","datePublished":"2021-03-20T07:41:45.829Z","dateModified":"2021-03-20T07:41:45.829Z"},{"@type":"Comment","text":">クリックという文字しか残りません。\r\n???\r\nボタンの話ですか?それともテキスト欄にクリックという文字を入力したんですか?\r\nボタンだけをinputに変えればそのあと、document.getElementbyidなどでも取得できると思いますよ?","datePublished":"2021-03-20T07:45:58.081Z","dateModified":"2021-03-20T07:45:58.081Z"},{"@type":"Comment","text":"確かにidでテキストボックスの中身を取得できますが、その後value属性に入れるやり方がわかりません。前までphpをしていまして、html内のvalue属性にを加えればよかったのですが、javascriptだとタグの中にいれることなどできないと思います。その時にどうしたらいいのかなと思いまして質問させていただきました。","datePublished":"2021-03-20T08:27:57.786Z","dateModified":"2021-03-20T08:27:57.786Z"},{"@type":"Comment","text":">その後value属性に入れるやり方がわかりません。\r\n>javascriptだとタグの中にいれることなどできないと思います。\r\nただただ値入れるだけなら「getid('').value = '代入データ'」でもできますし、\r\n「setAttribute」でタグ内の属性も変更できますし、\r\nタグ内の属性変更は調べたら大量に例題が出てくると思いますよ","datePublished":"2021-03-20T08:50:58.257Z","dateModified":"2021-03-20T08:50:58.257Z"},{"@type":"Comment","text":"一つ目のgetid('').value = '代入データ'のことなのですが色々なサイトで調べたのですが、入力した値をpタグに移すことはできても、同じテキストボックスに謝った値を入れることなどはどこに探しても乗っていませんでした。\r\n二つ目のsetAttributeはタグ内の属性変更できるというものとおっしゃっていましたが、value属性に値を入れて値を入れたvalue属性を変更するという物でしょうか。javascript初心者なのもで想像がつきません。簡単なプログラムを書いて教えていただけると嬉しいです。","datePublished":"2021-03-20T09:28:45.943Z","dateModified":"2021-03-20T09:28:45.943Z"},{"@type":"Comment","text":">一つ目のgetid('').value = '代入データ'のことなのですが色々なサイトで調べたのですが、入力した値を\r\n>pタグに移すことはできても\r\npタグ?\r\nただただ、持っている変数をテキストボックスに表示したいだけなら\r\ngetid('').value = 変数\r\nで行けると思いますよ。\r\n\r\n色々試行錯誤したいのであれば、作成したHTMLファイルを開いていただいて「F12」押下すると開発者ツールが開くと思うので、そこのコンソールなどに入力していただけるといいかもしれません。\r\n開発者ツールがわからないのであれば、便利なので調べて頂くといいと思います。\r\n\r\n二つ目に関しては、多分質問の回答とマッチしていない気がします....","datePublished":"2021-03-20T09:50:56.096Z","dateModified":"2021-03-20T09:50:56.096Z"}]},{"@type":"Answer","text":"文字数制限はmaxlengthで十分です\r\n```javascript\r\n\r\n
\r\n\r\n\r\n
\r\n```","dateModified":"2021-03-20T04:22:08.107Z","datePublished":"2021-03-20T04:22:08.107Z","upvoteCount":0,"url":"https://teratail.com/questions/328868#reply-454978","comment":[{"@type":"Comment","text":"回答ありがとうございます。テキストボックスの値を保持したいだけなのですが、、、","datePublished":"2021-03-20T04:57:11.649Z","dateModified":"2021-03-20T04:57:45.737Z"},{"@type":"Comment","text":"だから、テキストボックスの値を保持していますが?","datePublished":"2021-03-20T04:59:02.081Z","dateModified":"2021-03-20T04:59:02.081Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/JavaScript","name":"JavaScriptに関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/328868","name":"textボックスの値を保持したい"}}]}}}
質問するログイン新規登録

Q&A

2回答

3829閲覧

textボックスの値を保持したい

Gnr4A

総合スコア30

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/03/20 04:05

0

0

前提・実現したいこと

テキストの値を保持し、テキストにリロードをしてもテキストに書かれている値を消えずに残したいです。いろいろなサイトを調べても全くわかりませんでした。どうしたら保持できるのでしょうか。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>文字数チェック</title> <script> function check() { var getText = document.form.text1.value; if (getText.length >= 5) { alert("文字数が制限をこえています"); } else { alert("okです"); } </script> </head> <body> <form name="form"> <input name="text1" id="text1" type="text"> <button onClick='check()'>クリック</button> </form> </body> </html>

試したこと

localStorage.setItem('key', document.getElementById("text1").value);
let data = localStorage.getItem('key');
document.getElementById("text1").value = data;
調べたのですが、出てきたのはlocalStorage.setItemと言う関数でしたり、value属性に"<%= strName %>"を入れてみたのですが、保持できませんでした。

補足情報(FW/ツールのバージョンなど)

バージョンなどもわかりませんが自分はファイルを作り、そこで新規作成し、htmlファイル?を作りました。そのファイルをVSコードで開きプログラムをしています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

シンプルに

javascript

1<button onClick='check()'>クリック</button>

から

javascript

1<input type='button' onClick='check()' value = "クリック">

じゃだめなんです?
テキストボックスに残りますが...

投稿2021/03/20 05:32

wim

総合スコア17

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Gnr4A

2021/03/20 07:41

それだとクリックという文字しか残りません。自分は入力フォームなどで間違って入力された際に間違って入力された値を残したい。
wim

2021/03/20 07:45

>クリックという文字しか残りません。 ??? ボタンの話ですか?それともテキスト欄にクリックという文字を入力したんですか? ボタンだけをinputに変えればそのあと、document.getElementbyidなどでも取得できると思いますよ?
Gnr4A

2021/03/20 08:27

確かにidでテキストボックスの中身を取得できますが、その後value属性に入れるやり方がわかりません。前までphpをしていまして、html内のvalue属性に<?php ?>を加えればよかったのですが、javascriptだとタグの中にいれることなどできないと思います。その時にどうしたらいいのかなと思いまして質問させていただきました。
wim

2021/03/20 08:50

>その後value属性に入れるやり方がわかりません。 >javascriptだとタグの中にいれることなどできないと思います。 ただただ値入れるだけなら「getid('').value = '代入データ'」でもできますし、 「setAttribute」でタグ内の属性も変更できますし、 タグ内の属性変更は調べたら大量に例題が出てくると思いますよ
Gnr4A

2021/03/20 09:28

一つ目のgetid('').value = '代入データ'のことなのですが色々なサイトで調べたのですが、入力した値をpタグに移すことはできても、同じテキストボックスに謝った値を入れることなどはどこに探しても乗っていませんでした。 二つ目のsetAttributeはタグ内の属性変更できるというものとおっしゃっていましたが、value属性に値を入れて値を入れたvalue属性を変更するという物でしょうか。javascript初心者なのもで想像がつきません。簡単なプログラムを書いて教えていただけると嬉しいです。
wim

2021/03/20 09:50

>一つ目のgetid('').value = '代入データ'のことなのですが色々なサイトで調べたのですが、入力した値を >pタグに移すことはできても pタグ? ただただ、持っている変数をテキストボックスに表示したいだけなら getid('').value = 変数 で行けると思いますよ。 色々試行錯誤したいのであれば、作成したHTMLファイルを開いていただいて「F12」押下すると開発者ツールが開くと思うので、そこのコンソールなどに入力していただけるといいかもしれません。 開発者ツールがわからないのであれば、便利なので調べて頂くといいと思います。 二つ目に関しては、多分質問の回答とマッチしていない気がします....
guest

0

文字数制限はmaxlengthで十分です

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 document.querySelector('#text1').value=localStorage.text1; 4 document.querySelector('#text1').addEventListener('input', (e)=>{ 5 localStorage.text1=e.target.value; 6 }); 7}); 8 9</script> 10<form> 11<input name="text1" id="text1" type="text" maxlength="5"> 12<button id="btn">クリック</button> 13</form>

投稿2021/03/20 04:22

yambejp

総合スコア118164

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Gnr4A

2021/03/20 04:57 編集

回答ありがとうございます。テキストボックスの値を保持したいだけなのですが、、、
yambejp

2021/03/20 04:59

だから、テキストボックスの値を保持していますが?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問