javascript - 显示所需的输入弹出窗口(气泡)

Question

我使用 e.preventDefault(); 来禁止滚动页面到无效的 input。我试过 scrollintoview(false)，默认情况下将网站滚动到顶部，但它没有做任何事情。

现在，为了将页面滚动到无效的 input，我正在使用我自己的函数将屏幕上的元素居中。

不幸的是，使用这种方法我还禁用了警告气泡和 focus 无效元素。触发焦点并不难 - input.focus();。但是我应该怎么做才能让 JS 显示输入错误？出于某种原因，我无法使用 form.reportValidity() 函数。我需要像 input.triggerError();

这样的东西

// JS code, to center site on element:

// event.preventDefault();
// var elOffset = element.getBoundingClientRect().top + window.scrollY;
// var elHeight = element.height();
// var windowHeight = window.innerHeight;
// var offset;

// if (elHeight < windowHeight) {
//   offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
// }
// else {
//   offset = elOffset;
// }
// window.scrollTo(0, offset);
// element.focus();


// I CAN'T DO THIS:
// FORM.reportValidity();


// I'm searching for sth like this:
// element.reportValidity();

body {
  margin-top: 70px;
}
.fixed-menu h1,
.fixed-menu p {
  color: #ffffff;
  margin: 0;
}
.fixed-menu {
    background-color: #222;
    border-color: #080808;
    top: 0;
    border-width: 0 0 1px;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    height: 70px;
}

<div class="fixed-menu">
  <h1>This is fixed menu</h1>
  <p>I'm using e.preventDefault(); to disable that activity</p>
</div>

<form>
<br>
<label>this is input:
<input type="text" required>
</label>

<p style="margin-bottom: 100px"><b>Tip:</b><br>
1. leave this input, and srcoll to submit button.<br>
2. click on it.<br>
3. see - scroll is not good enought</p>


<button type="submit">Submit form</button>
</form>

Answer 1

这里有一些提示可以帮助解释我的解决方案:

• 我看到你在为 body 元素设置样式时做了什么 margin-top: 70px;在代码片段中有效但在浏览器中无效，所以我选择了一个具有相同精神的稍微不同的解决方案，这就是 css 的解释现在到细节:
• 您使用 invalidevent在输入元素上，你使用 scrollBy method将元素向下滚动固定菜单的 70px + 任何边距或边框，因此 -80
• 您可能会问为什么使用 setTimout 而不是在处理程序中直接调用 scrollBy，答案是这样行不通，因为它会发生冲突 以及 JavaScript 认为更重要的其他操作:滚动和显示标签不够好。解决方案是通过 setTimout
异步调用将 scrollBy 添加到操作队列中

document.getElementById("inp").addEventListener("invalid",function(){
	setTimeout(function(){
		scrollBy(0,-80)
	},0)
})

.body {

  position:relative;
}
.fixed-menu h1,
.fixed-menu p {
  color: #ffffff;
  margin: 0;
}
.fixed-menu {
    background-color: #222;
    border-color: #080808;
    top: 0;
    border-width: 0 0 1px;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    height: 70px;
}
Form{
	position:absolute;
	top:70px;
}

<div class="fixed-menu">
	<h1>This is fixed menu</h1>
	<p>I'm using e.preventDefault(); to disable that activity</p>
</div>

<form>
	<br>
	<label>this is input:
		<input id="inp" type="text" required>
	</label>

	<p style="margin-bottom: 100px">
		<b>Tip:</b><br>
		1. leave this input, and srcoll to submit button.<br>
		2. click on it.<br>
		3. see - scroll is now good enought
	</p>

	<button type="submit">Submit form</button>
</form>