☰

如何強制瀏覽器保存欄位內容以供日後使用？

tag-icon • tag-icon google-chrome amazon-web-services
如何強制瀏覽器保存欄位內容以供日後使用？

我使用 Chrome。在某些網站上，它似乎記住了不同領域的大量條目。我覺得它非常方便。然而，在某些網站上，它的表現並不好。 AWS 控制台上的範例讓我抓狂。更新 Lambda 函數時，我需要從 S3 複製檔案。有一個欄位需要很長的 URL，我每次都必須去其他地方檢索。 AWS Lambda 螢幕截圖

該字段的 HTML 為：

<input type="text" autocomplete="on" id="awsui-textfield-5"
class="awsui-textfield awsui-textfield-type-text">

因為autocomplete="on"我希望 Chrome 能夠“做正確的事™”，但也許是因為該領域不在其中<form>。

必須滿足什麼條件才能保存欄位？

我經常製作書籤或使用者腳本來解決網站上的小煩惱。我很想在這裡這樣做，但我不知道需要改變什麼。

請指教。

答案1

我已經解決了這個案例！我認為該解決方案可能適用於許多其他問題。我製造了一個小書籤以及您可以貼上到「開發人員工具」控制台中的 JavaScript 區塊。

var jq_tag=document.createElement('script');
jq_tag.setAttribute('src','//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js');
document.head.appendChild(jq_tag);
setTimeout(function() {
  var tf=$(document.activeElement);
  var ff=$('<form method="post" target="_blank" action="//example.com"><input type="submit" value="Save this field data"></form>');
  tf.after(ff);
  ff.prepend(tf);
}, 2000);

根據設計（為了使其更通用），它要求您將遊標放在相關的文字欄位中。當你執行JS時，欄位後面會出現一個「儲存該欄位資料」按鈕。

這是它逐行執行的操作的細分：

# Create a script tag in memory.
# Make it source jQuery.
# Attach it to do the <head> of the document which begins loading it.
# Barbaric workaround for waiting for the JS to load.
# Get the element that has focus.
# Create a form that will POST to example.com in a new tab.
# Attach the form to the DOM right after the "focused element".
# Detach the "focused element" and reattach it inside the new form element.

這是它的實際操作... 在此輸入影像描述

答案2

這與表單歷史控制 (II) 相比如何？ https://chromewebstore.google.com/detail/form-history-control-ii/lpcccgcdjibejkgiaeijbmkpbnbkglkb

相關內容