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

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 body margin-top: 70px;时你做了什么margin-top: 70px; 虽然在摘录中工作但在浏览器中却没有，所以我选择了一个略有不同的解决方案，具有相同的精神，这就是对css的解释现在对于细节：
• 您在输入元素上使用invalid事件 ，并使用scrollBy方法将元素向下滚动固定菜单的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>