使用javascript切换HTML5工具提示

Question

如果input元素的required属性为空，则会显示工具提示（使用Chrome）：“请填写此字段”。

<input type="text" name="foo" required />

是否有Javascript函数可以手动激活任何具有任何内容的位置的工具提示？ （没有自己创建）？

Answer 1

据我所知，您只能更改工具提示的文字 尝试收听invalid事件

document.getElementById("foo").addEventListener("invalid", function (e) {
    if (e.target.value == "") {
        e.target.setCustomValidity('Hey! "' + e.target.value + '" is not a valid username.');
    }
});

我没有测试它的浏览器兼容性，但我想这是一个新功能，可能还没有得到很好的支持。

Answer 2

您可以通过编程方式点击“提交”按钮 - 这将触发验证和工具提示，例如像这样的HTML

<form id="bla">
   <input type="text" required />
   <input type="submit" value="Submit" id="submit" />
</form>

致电

document.getElementById("submit").click();

将显示空字段的工具提示。

演示：http://jsfiddle.net/bmF4N/

如果您正在寻找更多控制权 - 您可能需要查看自定义验证程序，例如http://jqueryvalidation.org/required-method/

Answer 3

不再可能：https://code.google.com/p/chromium/issues/detail?id=259050

其中一位铬开发商明确表示：

  

Web作者需要从头开始构建自己的UI。