web-dev-qa-db-ja.com

HTML-更新後も保持される入力値

通常、HTMLページで更新が行われると、入力フィールドの値が保持されます（Ctrl + F5を実行しない限り）。

フォームや入力自体を変更せずに、この動作を変更できるヘッダーやその他のタイプの設定はありますか？

Productionでページを更新した後、入力値が保持されないサイトがあります。ただし、このコードをローカルマシンでテストした場合、この動作はありません。

htmlinputrefresh
24
JB Hurteaux

属性autocomplete=offを設定すると、コンテンツは保存されません。

あるいは、フォーム全体をクリアする（reset（）メソッドを使用する）か、単一のフィールドをリセットするかによって、正確に何を実行したいかに応じて、JavaScriptでこれを実行する方法はたくさんあります。

66
McPherrinM

フォームのonloadにform.reset（）を追加できます。

<html>
    <body onload="form1.reset();">
        <form id="form1">
            <textarea id="text"></textarea>
        </form>
    </body>
</html>

更新：これは便利なテクニックかもしれませんが、実際には送信者の質問に答えないことがわかりました。

8
Mark Byers

JavaScriptを使用してDOMのデフォルト値を設定できるのはどうですか？

何かのようなもの

<input name="foo" id="foo" type="text">

$('#foo').val('3')
2
hex

私の知る限り、これを実装する標準的な方法はないため、無効にする前に、まずサイトでの動作を確認する必要があります。ここでさまざまな答えからわかるように、彼らがそれを行うことができたであろう多くの方法があります。

何が起こっているのかを理解する良い方法は、コードを、問題を再現する最も単純な可能な例に減らすことです。すべてのグラフィックス、不要なテキスト、スタイルシートおよびその他のフォーマット、無関係なJavaScript、無関係なHTMLタグなどを削除しますが、問題が引き続き再現できることを常に確認してください。最終的にはコードがほとんど残っていないので、フィールドがリセットされる原因が何であるかは明らかです。ローカルで複製することはできないため、これらすべてを本番マシンで実行する必要があります。これを行うには、スクリプトのコピーを取り、それらの名前をindex2.htmlなどに変更します。何か問題が発生した場合に備えて、これを行う前に本番システムのバックアップがあることを確認してください。

それでも問題を解決する方法がわからない場合は、コードを十分に小さくしてここに投稿できれば、他の誰かが問題を解決できるはずです。

2
Mark Byers

私は通常これを使用します：

var reset_input_values = document.querySelectorAll('input');
for (var i = 0; i < reset_input_values.length; i++) {
  reset_input_values[i].value = 'value you want ';
}
1
Xalsar

次のように、入力の値を空の文字列にリセットできます。

HTMLコード：

<form>
    <input type="email" id="input-value" placeholder="Type your email..." required>
    <button type="submit">Submit</button>
</form>

JSコード：

window.onload = function() {
  document.getElementById('input-value').value = '';
}

ページが更新されるたびに入力値を消去します。お役に立てば幸いです。

0
Manuel Abascal

私はこれを解決しました。

回避策：

  1. TypeScriptファイルにブールフラグを追加し、デフォルトでdisable（false）を設定します
  2. あなたのHTMLに_*ngIf_を配置します
  3. ngAfterViewInit()でtrueに設定します
0
SAI KAMAL DIDIGAM