有没有办法在某些浏览器中定位电子邮件提示？ [英] Is there a way to position email hints in certain browsers?

问题描述

在我的网站上点击注册，然后输入不是电子邮件的内容（例如，简单的'asd'），然后点击'注册'（只需使用任何密码（例如'Asdasd12'）），Chrome将显示一条消息，告诉您缺少什么。 Firefox尝试相同的，但如果你做同样的事情，它位置一个尴尬的请输入一个电子邮件地址。提示完全错误的地方。

有没有办法告诉每个浏览器放置这些电子邮件提示的最佳位置？
$ b

（注意：这个网站在IE中被破解了，但它仍然把提示放在了正确的位置上，看起来就像firefox。）

Firefox：Chrome比较图像：
< img src =https://i.stack.imgur.com/2DIOY.pngalt =在这里输入图片描述>

解决方案

 < form action =...novalidate> 
< / form> 
  

我发现这个问题，这似乎与你的相似。在我的Firefox中，HTML5验证提示被正确定位。我一直无法找到一致的跨浏览器方式来设计HTML5验证提示。

顺便说一下，页面上显示/隐藏表单提示的代码使用onfocusin以及Firefox中不支持的onfocusout事件（参见 W3schools解释）。将这些改为onfocus和onblur将适当地显示/隐藏Firefox中的提示以及当前正在正常工作的其他浏览器。

 < input class =id =email1oninput =Check（1）name =email1placeholder =Emailmaxlength =128onfocus =Show（'email-hint'）; 1）;的onblur =隐藏（电子邮件提示）;类型= 电子邮件 > 
  

On my website if you click 'Register' and then enter something that is not an email (for example, simply 'asd') in the email input, and click 'Sign up' (just use anything for the password (eg 'Asdasd12')) Chrome displays a message telling you what is missing. Firefox attempts the same but if you do the same thing, it positions an awkward 'Please enter an email address.' hint in completely the wrong place.

Is there a way to tell each browser the best place to position these email hints?

(Note: the website is broken in IE but it still places the hint in the correct place, it's just firefox it seems.)

Firefox:Chrome comparison image:

解决方案

Given that you already have hints for the various fields, the extra HTML5 validation hints are probably unnecessary. You can turn them off by adding a novalidate attribute to the form:

<form action="..." novalidate>
</form>

I found this issue which seems to be similar to yours. In my Firefox the HTML5 validation hint is positioned correctly. I haven't been able to find a consistent cross-browser way to style HTML5 validation hints.

Incidentally the code on your page that shows / hides the form hints uses onfocusin and onfocusout events, which are not supported in Firefox (see the W3schools explanation). Changing these to onfocus and onblur will appropriately show/hide the hint in Firefox as well as the other browsers that are currently working correctly.

<input class="" id="email1" oninput="Check(1)" name="email1" placeholder="Email" maxlength="128" onfocus="Show('email-hint'); Move(1);" onblur="Hide('email-hint');" type="email">

这篇关于有没有办法在某些浏览器中定位电子邮件提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！