gpt4 book ai didi

javascript - Jquery 在 Chrome 扩展选项页面中验证

转载 作者:太空宇宙 更新时间:2023-11-04 16:31:31 26 4
gpt4 key购买 nike

对于这一切以及 JavaScript 和一般编码来说都是全新的,所以在开始之前我先表达歉意。

我一直在尝试使用jquery.validate.min.js检查我一直在尝试创建的 chrome 扩展选项页面的文本输入。

当我添加 <form> 时,事情就发生了变化。标记到 options.html 页面:一旦您单击“保存”按钮,所有 options_ui.chrome_style格式丢失。

我使用过 chrome 扩展 options example并得到相同的结果。

mainfest.json

{
"manifest_version": 2,
"name": "Options Test extension",
"version": "1.0",

"options_ui": {
"page": "options.html",
"chrome_style": true
}
}

选项.html

<!DOCTYPE html>
<html>
<head>
<title>My Test Extension Options</title>
<style>
body: { padding: 10px; }
</style>
</head>

<body>
<form id="form_a">
Favorite color:
<select id="color">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="yellow">yellow</option>
</select>

<label>
<input type="checkbox" id="like">
I like colors.
</label>

<div id="status"></div>
<button id="save">Save</button>
</form>
<script src="options.js"></script>
</body>
</html>

选项.js

 // Saves options to chrome.storage.sync.
function save_options() {
var color = document.getElementById('color').value;
var likesColor = document.getElementById('like').checked;
chrome.storage.sync.set({
favoriteColor: color,
likesColor: likesColor
}, function() {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Options saved.';
setTimeout(function() {
status.textContent = '';
}, 750);
});
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
// Use default value color = 'red' and likesColor = true.
chrome.storage.sync.get({
favoriteColor: 'red',
likesColor: true
}, function(items) {
document.getElementById('color').value = items.favoriteColor;
document.getElementById('like').checked = items.likesColor;
});
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
save_options);

当我无法使用 <form> 时,我将如何验证输入,对于我自己的扩展中的文本输入?

最佳答案

您所说的“事情向侧面发展”可能是 <button> elements 的默认行为.

如果这样的元素位于 <form> 内元素,默认行为类似于提交按钮。这不是您想要的:它重新加载页面(这显然具有不应用 chrome_style 的附加效果,因为它没有明确加载“作为选项页面”)。

您的问题可以通过指定按钮类型来解决:

<button type="button" id="save">Save</button>

或者,您可以调用preventDefault()save_options 中的事件对象上(如果您添加了事件参数)。但指定按钮类型更清晰。

关于javascript - Jquery 在 Chrome 扩展选项页面中验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39769392/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com