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

前提・実現したいこと

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

該当のソースコード

<!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コードで開きプログラムをしています。

行動規範の内容に同意します

回答2件

シンプルに

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」押下すると開発者ツールが開くと思うので、そこのコンソールなどに入力していただけるといいかもしれません。開発者ツールがわからないのであれば、便利なので調べて頂くといいと思います。二つ目に関しては、多分質問の回答とマッチしていない気がします....

行動規範の内容に同意します

文字数制限は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>