[英]Show required pop-up (bubble) of input
I used e.preventDefault();
我使用了
e.preventDefault();
to disable scrolling page to invalid input
. 禁用滚动页面无效
input
。 I'm tried for that scrollintoview(false)
, with by default scroll site to top, but it doesn't do anything. 我试过了那个
scrollintoview(false)
,默认情况下滚动网站到顶部,但它没有做任何事情。
Now, for scrolling page to invalid input
, I'm using my own function that center element on screen. 现在,为了将页面滚动到无效
input
,我正在使用我自己的功能,即屏幕上的中心元素。
Unfortunately, with this method I also disabled a warning bubble and focus
on invalid element. 不幸的是,通过这种方法,我还禁用了警告气泡,并
focus
于无效元素。 Triggering focus it's not hard - input.focus();
触发焦点并不难 -
input.focus();
. 。 But what should I do, to show input error bubbly by JS?
但是,我该怎么做,以显示JS的输入错误? For some reason, I can't use
form.reportValidity()
function. 出于某种原因,我不能使用
form.reportValidity()
函数。 I need something like input.triggerError();
我需要像
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>
Here is some hints that helps explaining my solution : 以下是一些有助于解释我的解决方案的提示:
margin-top: 70px;
margin-top: 70px;
时你做了什么margin-top: 70px;
that worked in the snippet but not in the browser, so I've opted to a slightly different solution with the same spirit, that's the explanation of the css Now to the nitty-gritty : invalid
event on the input element and you use scrollBy
method to scroll the element down by 70px
of the fixed menu + any margin or border hence -80
invalid
事件 ,并使用scrollBy
方法将元素向下滚动固定菜单的70px
+任何边距或边框因此-80
setTimout
instead of directly calling scrollBy
inside the handler, the answer is that will not work because it will be in conflict with other actions that JavaScript consider more important which are : the not good enough scrolling and the displaying the label. setTimout
而不是直接在处理程序中调用scrollBy
,答案是无效的,因为它会与JavaScript认为更重要的其他操作冲突 :滚动不足和显示标签。 The solution to that is in adding scrollBy
to the queue of actions by calling it asynchronously by setTimout
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.