显示需要的输入弹出（泡泡）

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的解释 现在到ni TTY-坚韧不拔：
• 您输入元素上使用invalidevent和使用scrollBy method由固定的菜单+任何保证金或边界的70px向下滚动元件因此-80
• 您可能，为什么使用setTimout而不是直接调用问scrollBy里面的处理程序，答案是，将无法正常工作，因为它会在冲突与JavaScript认为更重要的其他操作，它们是：不够好的滚动和显示标签。 到该解决方案是增加scrollBy到行动的队列通过setTimout

document.getElementById("inp").addEventListener("invalid",function(){ 
 
\t setTimeout(function(){ 
 
\t \t scrollBy(0,-80) 
 
\t },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{ 
 
\t position:absolute; 
 
\t top:70px; 
 
}

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

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

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

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