控制输入​​提示

Question

某些浏览器根据输入的类型向用户提供输入字段的提示，例如：这里是type="email"：

<input accesskey="e" name="email" id="email" type="email" required>

铬：

火狐：

我的问题是：

• 这些是任何规格的一部分吗？
• 有没有办法控制该消息（消息本身以及禁用/启用它）？
• 有没有办法设置此工具提示的样式？

Answer 1

它的浏览器行为因此无法修改，但您可以使用bootstrap css框架完成类似工具提示或提示

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> 

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>

您可以找到示例here

Answer 2

这是Mozilla

的解决方案

var email = document.getElementById("mail");

email.addEventListener("input", function (event) {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("I expect an e-mail, darling!");
  } else {
    email.setCustomValidity("");
  }
});

Answer 3

要自定义这些消息的外观和文本，您必须使用JavaScript，没有办法只使用HTML和CSS。

您可以使用以下内容：

var email = document.getElementById("mail");

    email.addEventListener("input", function (event) {
      if (email.validity.typeMismatch) {
        email.setCustomValidity("I expect an e-mail, pls!");
      } else {
        email.setCustomValidity("");
      }
    });

HTML5为表单引入了新的机制：它为元素和约束验证添加了新的语义类型，以简化在客户端检查表单内容的工作。 Check this documentation

如果要在HTML5中禁用表单的客户端验证，请向表单元素添加novalidate属性。 Fx的：

<form method="post" action="/foo" novalidate>...</form>

Answer 4

只需给出一个title属性并使用你的内容来显示，并且无法设置样式，为你设置样式你需要包含jquery库

<input type="text" title="this is how i did that" />