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 < / LI>
您可能会问为什么使用setTimout而不是直接在处理程序中调用scrollBy，答案是无效的，因为它将与冲突中的其他操作JavaScript认为更重要的是：不够好的滚动和显示标签。解决方法是通过scrollBy

setTimout

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

$this->session->userdata()

＆＃13;

显示输入所需的弹出窗口（气泡）

1 个答案: