質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

解決済

1回答

851閲覧

html history.go(-1) 出戻った時にだけテキストエリアと、インプットボックスが入力できなくなる

MTUGB

総合スコア2

JavaScript

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

0グッド

0クリップ

投稿2021/03/17 14:08

前提・実現したいこと

history.go(-1)出戻った時に、テキストエリアに文字が入力できるようにしたい。

発生している問題・エラーメッセージ

ほかのファイルから history.go(-1); でこのファイルに戻ってきたときに、
テキストエリアとインプットボックスが入力できません。しかしなぜか、そのときに開発者ツール(F12を押した時に出る画面)を開くと入力できます。
通常どおりのアクセスだと、最初から入力できます。

エラーメッセージは出ていません。

該当のソースコード

html

1<meta charset="utf-8"> 2<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport"> 3 4<div id="account"></div> 5<div id="ac_win"> 6 <x>x</x><b>○○さん</b><br /> 7 @xxx<br> 8 <small>mail</small> 9 <hr /> 10 <a href="./functions/logout.php">ログアウト</a> 11</div> 12 13<hed> 14 <div id="invite">招待</div> 15 <input type="email" id="member" placeholder="招待する相手のメールアドレス"> 16</hed> 17<div id="chat_area"></div> 18<fm> 19 <textarea id="msg" placeholder="ここにメッセージを入力。送信ボタンで送信。"></textarea> 20 <button id="send"></button> 21</fm> 22<div id="contextmenu"> 23 <ar> 24 <p data-to="del">DELETE</p> 25 <p data-to="copy">COPY</p> 26 </ar> 27</div> 28<script> 29document.oncontextmenu = function() { 30 return false; 31 } 32 window.addEventListener('DOMContentLoaded', load_chat); 33 document.getElementById('msg').addEventListener('contextmenu', function(e) { 34 e.stopPropagation() 35 }, true); 36 document.getElementById('msg').addEventListener("keydown", function(e) { 37 if (e.shiftKey && e.key === 'Enter') document.getElementById('send').click(); 38 }); 39</script>

css

1 * { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5 -webkit-appearance: none; 6 } 7 8 *:not(textarea):not(input) { 9 user-select: none; 10 -webkit-user-select: none; 11 } 12 13 #contextmenu { 14 top: 0; 15 left: 0; 16 position: fixed; 17 z-index: 3; 18 height: 100%; 19 width: 100%; 20 display: none; 21 background: rgba(0, 0, 0, 0.3); 22 } 23 24 #contextmenu ar { 25 position: absolute; 26 font-size: 18px; 27 top: 50%; 28 left: 50%; 29 display: inline-block; 30 -webkit-transform: translate(-50%, -50%); 31 transform: translate(-50%, -50%); 32 box-shadow: 0 0 40px #ccc; 33 padding: 10px 3px; 34 outline: 2px solid #ccc; 35 background-color: #fff; 36 font-size: 24px; 37 } 38 39 #contextmenu p { 40 color: blue; 41 border-bottom: 2px solid #ccc; 42 cursor: pointer; 43 } 44 45 #chat_area { 46 height: 90%; 47 width: 70%; 48 background-color: aliceblue; 49 margin: 0 auto; 50 overflow-y: scroll; 51 scroll-behavior: smooth; 52 } 53 54 #chat_area::-webkit-scrollbar { 55 display: none; 56 } 57 58 #chat_area cn { 59 font-size: 26px; 60 width: 100%; 61 text-align: center; 62 display: block; 63 margin: 10px 0; 64 } 65 66 msg { 67 border-radius: 2%; 68 display: inline-block; 69 margin: 10px auto; 70 padding: 5px 10px; 71 color: #4f4f4f; 72 background-color: background:rgba(255, 230, 209, 0.4); 73 border: 0.5px rgba(252, 189, 146, 0.5) solid; 74 box-sizing: border-box; 75 max-width: 45vw; 76 word-wrap: break-word; 77 font-size: 17px; 78 } 79 80 81 div.right { 82 width: 100%; 83 text-align: right; 84 } 85 86 div.left { 87 width: 100%; 88 } 89 90 fm { 91 display: flex; 92 width: 100%; 93 justify-content: center; 94 height: 10%; 95 } 96 97 textarea { 98 display: inline-block; 99 margin-right: 0; 100 margin-bottom: 20px; 101 padding: 10px; 102 width: 200px; 103 height: 100%; 104 font-size: 100%; 105 box-sizing: border-box; 106 border-radius: 5px 0 0 5px; 107 border: 1px solid #ccc; 108 border-right: none; 109 resize: horizontal; 110 user-select: auto; 111 -webkit-user-select: auto; 112 } 113 114 button { 115 display: inline-block; 116 padding: 0 10px; 117 color: #fff; 118 width: 50px; 119 height: 100%; 120 font-size: 100%; 121 vertical-align: top; 122 border: none; 123 border-radius: 0 5px 5px 0; 124 background: #1f76e2; 125 background-image: url('送信ボタン画像のパス'); 126 background-size: 80%; 127 background-repeat: no-repeat; 128 background-position: center; 129 transition: background-position 2.5s ease; 130 } 131 132 button:active { 133 background-position: 300px -300px; 134 background-size: 50%; 135 } 136 137 div#invite { 138 padding: 10px; 139 font-size: 19px; 140 background-color: lightblue; 141 display: inline-block; 142 border-radius: 25%; 143 transition: all 0.6s ease; 144 opacity: 0.4; 145 pointer-events: auto; 146 } 147 148 div#invite:hover { 149 background-color: #fff; 150 outline: 3px solid lightblue; 151 outline-offset: -3px; 152 opacity: 1; 153 } 154 155 input#member { 156 pointer-events: none; 157 display: inline-block; 158 opacity: 0; 159 transition: opacity 0.6s ease-in-out; 160 height: 29px; 161 margin-right: 10px; 162 outline: 2px solid #ccc; 163 user-select: auto; 164 -webkit-user-select: auto; 165 } 166 167 .block { 168 opacity: 1 !important; 169 pointer-events: auto !important; 170 } 171 172 hed { 173 position: fixed; 174 top: 5px; 175 left: 5px; 176 right: 5px; 177 display: block; 178 pointer-events: none; 179 text-align: left; 180 } 181 182 183 #account { 184 width: 38px; 185 height: 38px; 186 background: url("アカウントアイコン画像のパス") center / 90% no-repeat; 187 border: 2px solid #ccc; 188 border-radius: 50%; 189 transition: box-shadow 0.4s ease; 190 margin: 3px; 191 position: fixed; 192 top: 0; 193 right: 0; 194 z-index: 1; 195 } 196 197 #account:hover { 198 box-shadow: 0 0 0 3px lightblue; 199 } 200 201 #ac_win { 202 opacity: 0; 203 position: fixed; 204 top: 0; 205 right: 0; 206 border: 2px solid #ccc; 207 border-radius: 5px; 208 margin: 3px; 209 padding: 5px; 210 font-size: 17px; 211 text-align: center; 212 z-index: 2; 213 background-color: #fff; 214 transition: opacity 0.6s ease; 215 pointer-events: none; 216 } 217 218 #ac_win small { 219 color: darkgrey; 220 } 221 222 x { 223 display: block; 224 width: 100%; 225 text-align: right; 226 font-weight: bold; 227 color: tomato; 228 cursor: pointer; 229 } 230 231 232 233 @media(max-width:767px) { 234 #chat_area { 235 width: 100%; 236 } 237 } 238

試したこと

css の user-select:none を 一度削除してみた。

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

windows10
xampp を利用しています。
ブラウザはchromeです。
EDGE でも同じ現象が起こっています。

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

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

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

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

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

yambejp

2021/03/18 01:14

とりあえず宣言されていないload_chatはどこから持ってきているのでしょうか?
MTUGB

2021/03/18 08:00

>>宣言されていないload_chatはどこから持ってきているのでしょうか? 関数を別途用意しています。 非同期で通信することで代替できたので、もう大丈夫です。 ありがとうございました。
guest

回答1

0

自己解決

javascript

1 var fd = new FormData(); 2 fd.append('room_name', roomName); 3 var xhr = new XMLHttpRequest(); 4 xhr.open('POST', 'rename.php'); 5 xhr.send(fd); 6 xhr.onreadystatechange = function() { 7 if ((xhr.readyState == 4) && (xhr.status == 200)) { 8 alert('チャット名を変更しました'); 9 location.reload(true); 10 } 11 };

非同期通信することで、history.go(-1); を利用しないようにすることができました。

投稿2021/03/18 08:02

MTUGB

総合スコア2

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問