顯示輸入所需的彈出窗口（氣泡）

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>