javascript - 使用 javascript 切换 HTML5 工具提示

Question

将input具有属性的元素required留空时，会出现一个工具提示（使用 Chrome）：“请填写此字段”。

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

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

Answer 1

您可以通过编程方式单击“提交”按钮 - 这将触发验证和工具提示，例如使用这样的 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 2

据我所知，您只能更改工具提示的文本。
尝试听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 3

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

一位铬开发人员明确表示：

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