HTML5 Chrome checkValidity onBlur [英] HTML5 Chrome checkValidity onBlur

问题描述

我正在尝试在模糊上对数字输入字段进行简单的checkValidity，但无法使其正常工作。这是否可以在Chrome中使用？例如：

 < input onBlur =checkValidity（）type =numbername =xid = xmin =64max =2048value = 64> 
  

或

 < input onBlur =this.checkValidity（）type =numbername =xid =xmin =64max =2048value = 64> 
  

似乎没有做任何事情。然而，在控制台中，

  $（＃x）[0] .checkValidity（）
  code> 

根据输入框中的当前值和（64,2048）的上述限制返回true或false。这是打破了，还是我做错了？

解决方案

这是您可能想要前往的演示：



http://jsfiddle.net/9gSZS/

 < input type =numbermin =64max =256onblur =validate（this）; /> 
  





function validate（obj）
{
if（！obj.checkValidity（））
{
alert（您输入无效，请更正！）;
obj.focus（）;




注意到我只是证明概念在这里; alert 可能会导致非常不愉快的体验，因此请不要复制它。

使用浮动DIV来吸引用户，而不是完全阻止 alert 。

I'm trying to do a simple checkValidity of a numeric input field on blur, but can't get it to work properly. Does this work in Chrome yet? For instance:

<input onBlur="checkValidity()" type="number" name="x" id="x" min="64" max="2048" value=64>

or

<input onBlur="this.checkValidity()" type="number" name="x" id="x" min="64" max="2048" value=64>

Don't seem to do anything. However, in the console,

$("#x")[0].checkValidity() 

does return true or false based on the current value in the input box and the limits above of (64,2048). Is this broken, or am I doing it wrong?

解决方案

This is a demonstration of what you may want to head to:

http://jsfiddle.net/9gSZS/

<input type="number" min="64" max="256" onblur="validate(this);" />

function validate(obj)
{
  if(!obj.checkValidity())
  {
    alert("You have invalid input. Correct it!");
    obj.focus();
  }
}

Noted that I'm just demonstrating the concept here; alert may cause very unpleasant experience, so don't just copy it.

Use some floating DIV to attract your user, instead of the full-blocking alert.

这篇关于HTML5 Chrome checkValidity onBlur的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！