如何将文本区域转换为表单？

Question

您好，我需要帮助将文本区域转换为具有三个输入的基本表单，例如...用户可以将他们的名字、姓氏和电子邮件输入表单。目前我的代码有一个文本区域，它被存储到 chrome 存储中。请帮我把它转换成一个表格，并仍然在 chrome 存储中存储和检索它。非常感谢。

html:

    <meta charset="UTF-8">
    <title>Document</title>
    <script src="script.js"></script>
</head>
<body>
    <textarea id="saveLine"></textarea>
    <input type="button" id="save" value="Save Line">

    <input type="button" id="get" value="Get Saved Line">

JS 文件：

window.onload = function() {
    document.getElementById('save').onclick = function() {
    var value = document.getElementById('saveLine').value;

    chrome.storage.sync.set({'myLine': value}, function() {
        alert('success');
    });
};

document.getElementById('get').onclick = function() {
    chrome.storage.sync.get('myLine', function(data) {
        alert(data.myLine);
    });
}
}

Answer 1

只需将 HTML inputs/buttons/etc 包装在具有 action 属性的 form 元素中（尽管这是可选的）。在这种情况下，您还需要将至少一个按钮更改为 type="submit"。

<form id="some_form" action="/some/endpoint">
  <textarea id="saveLine"></textarea>
  <input type="submit" id="save" value="Save Line">
  <input type="button" id="get" value="Get Saved Line">
</form>

您可能还想通过 JS 处理表单提交，因为如果您希望它也提交到 Chrome 存储，那么您需要劫持表单 submit 处理程序。

var form = document.getElementById('some_form')
form.addEventListener('submit', function (event) {
  console.log('Form elements', form.elements)
  event.preventDefault()
  // Do your Chrome Storage stuff here with form elements
})

如何将文本区域转换为表单？

How can i convert a textarea into a form?

javascript

html

google-chrome-extension

textarea

google-chrome-storage