是否可以在 HTML 表单中创建自己的自定义输入类型？答案

【问题标题】：Is it possible to make your own custom input types in an HTML form?是否可以在 HTML 表单中创建自己的自定义输入类型？
【发布时间】：2017-10-08 10:18:10
【问题描述】：

我想知道我是否可以制作这样的东西：<input type="secure">。我想知道是否可以为我的网站制作自定义输入类型。我打算用它来做你通常不能做的事情，用 CSS 设置样式，用 JavaScript 让它做我想做的事情。这是任何示例：

CSS

@import url("https://fonts.googleapis.com/css?family=Roboto");
input[type="secure"] {
  background-color: #b5d1ff;
  border: 0.5px solid #f4a460;
  height: 1.6rem;
  color: black;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  width: 8.62rem;
  font-family: 'Roboto', serif;
}

我目前还没有决定我想用 JavaScript 做什么，但我想你明白了。

【问题讨论】：

你不应该这样做的原因是，虽然当前的浏览器会将“安全”视为“文本”，但不能保证未来的浏览器会一直这样做，而是开始做一些奇怪的事情您的输入控件。

标签： javascript html css forms

【解决方案1】：

不，这就是课程的用途。即使“技术上可以”，您也会破坏兼容性和 HTML 标准合规性。

【讨论】：

【解决方案2】：

您可以创建这样的输入，但未知的type 值将被浏览器视为默认text（登录到控制台）。如果你检查 DOM，你会看到 type="secure":

const s = document.createElement('input');
s.setAttribute('type', 'secure');

document.body.appendChild(s);

console.log(s); // <input type="secure">

console.log('type: ', s.type); // type: "text"

【讨论】：

【解决方案3】：

是的，您可以这样做，但您并没有真正创建一种新的输入类型，您只是创建了一种浏览器/渲染引擎不知道并将忽略的类型。但是 CSS 应该适用于它。

但是，我建议您只需将一个类添加到输入中，如果这只是为了样式目的。

<input class="my-input" ...>

input.my-input {
  ...
}

【讨论】：