假设我正在托管site2.com并拥有site2.com/frame.html如下简单的文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Site2.com frame</title>
<style>
body { background-color: yellowgreen; }
</style>
</head>
<body id="site2-frame-body">
<h1>This is site2.com frame for 3rd party use</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>
现在说 3rd 方网站site1.com想要通过这样的iframe元素嵌入这个内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Site1</title>
</head>
<body>
<style>
#site2frame { border: 2px solid red; }
#site2frame-body { background-color: blue !important; }
</style>
<iframe id="site2frame"
title="Inline Frame Example"
width="300" …我有一个 HTML 输入。当用户在其中输入内容时，我设置了“输入”事件来处理将输入更新为用户输入内容的过滤版本（以及更新选择开始和选择结束以获得流畅的用户体验）。为了达到适当的效果，这种情况会不断发生。
然而，我注意到，每当 JS 通过 设置输入的值时input.value = '...';，输入的撤消历史记录就会消失。也就是说，在聚焦的情况下按 Ctrl-Z 不再返回到之前的状态。
有什么方法可以提供输入自定义撤消历史记录，或者以其他方式防止它丢失历史记录，同时仍然更改其值？
这是我的问题的一个最小示例：
输入顶部输入（基本在每个字符之间添加句点）后，Ctrl-Z 不会撤消。
<body>
<input type="text" id="textbox" placeholder="No undo"/><br/>
<input type="text" id="textbox2" placeholder="Undo"/>
<script>
var tbx = document.getElementById("textbox");
tbx.addEventListener('input', () => {
tbx.value = tbx.value + '.'
});
</script>
</body>下面的代码几乎可以达到目的。如果您打开任何详细信息标签，然后单击其外部的任何位置，它将关闭。但是，当新的详细信息标签打开时，当前打开的详细信息标签不会关闭。
var details = [...document.querySelectorAll('details')];
document.addEventListener('click', function(e) {
if (!details.some(f => f.contains(e.target))) {
details.forEach(f => f.removeAttribute('open'));
}
})<details>
<summary>Details 1</summary>
<p>content</p>
</details>
<details>
<summary>Details 2</summary>
<p>content</p>
</details>
<details>
<summary>Details 3</summary>
<p>content</p>
</details>我缺少什么？
谢谢。
我用 HTML 制作了这款 iPhone（请不要注意意大利面条式的代码，它是德文的，如果需要我可以很乐意翻译它）：
var time = document.getElementById("time");
var notification = document.getElementById("notification");
var notificationHeader = document.getElementById("notificationHeader");
var notificationDescription = document.getElementById("notificationDescription");
var verificationCode = Math.floor(1000 + Math.random() * 9000);
var input = document.getElementById("instagramNumberText");
var correctOrWrongCheck = document.getElementById("correctOrWrongCheck");
var verificationCodePTag = document.getElementById("verificationCode");
var instagram = document.getElementById("instagramApp");
var mail = document.getElementById("mailApp");
var createAccountButton = document.getElementById("createAccount");
var createAccountForm = document.getElementById("createAccountForm");
var verificationCodeInstagramPage = document.getElementById("verificationCodeInstagramPage");
var controlVerificationCodeButton = document.getElementById("controlVerificationCode");
var continueToInstagramAccountButton = document.getElementById("continueToInstagramAccount");
var verificationCodeEmailDescription = document.getElementById("verificationCodeEmailDescription");
var verificationCodeEmail = document.getElementById("verificationCodeEmail");
var erfolgreichAngemeldet = document.getElementById("erfolgreichAngemeldet"); …在下面的演示中，在锚标记上单击并按住 mousedown，然后将光标拖离，同时按住 mousedown，最后松开单击。您将在锚标记周围看到一个红色的虚线轮廓。现在，如果您按下 shift 键，轮廓将偏移几个像素。
a:focus {
outline: 1px dotted red;
}<a href="#">Click+hold, then release, then press shift key</a>该行为不会在按下ctrl或fn键等时发生，但会发生在大多数键上。这种行为似乎是跨浏览器兼容的，这让我思考：
如果我在页面上有一堆元素background-color: #000685;没有共同点（没有共同的 id、类、标签名称等）。
有没有办法用 JavaScript 遍历它们并更改背景颜色值？
我有播放音频的脚本，下面脚本的问题是它在释放鼠标点击时播放。
<!doctype html>
<html>
<head>
<title>Audio</title>
</head>
<body>
<script>
function play() {
var audio = document.getElementById("audio");
audio.play();
}
</script>
<input type="button" value="PLAY" onclick="play()">
<audio id="audio" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>
</body>
</html>我希望上面的脚本在鼠标点击时播放（类似于activeCSS）
任何帮助，将不胜感激。谢谢。
执行以下操作：
val zonedFormatter: DateTimeFormatter = DateTimeFormatter.ofPattern("dd.MM.yyyy HH:mm z")
ZonedDateTime.from(zonedFormatter.parse("31.07.2020 14:15 GMT"))
给我：
"displayDate": "2020-07-31T14:15:00Z[GMT]"
我想要没有 [GMT] 的：
"displayDate": "2020-07-31T14:15:00Z"
我想通过鼠标滚动更改输入类型范围的值。
如果用户向上滚动，则范围的值增加，如果用户向下滚动，则值减小。
我找到了该wheel事件，但我不确定如何使用它来完成手头的任务。
顺便说一句，我在100vh身体上，所以我无法用滚动条进行操作。
我有两个带有提交按钮的选择表单，例如我需要获取所选值的结果
第一个选择具有颜色作为选项的表单，第二个包含其他内容。
我有一些项目作为 div....红花，红鱼。
如果我从第一个表单中选择红色，它会显示红色值 div，而在第二个表单中，如果我选择花，它应该只显示红色的花，但它会显示红色值下的所有内容。只有当我提交搜索按钮时，所有这些都必须起作用。我在下面附上了 jsfiddle。代码：
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});.box{
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-5">
<select class="form-control">
<option value="all">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="col-5">
<select class="form-control">
<option value="all">All</option>
<option value="flower">flower</option>
<option value="fish">fish</option>
<option value="toy">toy</option> …html ×7
javascript ×7
css ×6
browser-bugs ×1
html-input ×1
http ×1
iframe ×1
java ×1
java-time ×1
jquery ×1
mousewheel ×1
scroll-snap ×1
undo ×1
w3c ×1
web ×1