HTML - 输入元素中不可删除的占位符

Question

我的表单中有一个 URL 字段。http://验证器要求它前面有它，我想很多人不会理解。

我可以有一个用户无法在其之前删除或写入的“占位符”吗？

示例：http: //myinputhere.com

<input type="url" placeholder="http://">

Answer 1

占位符不会将placeholder文本连接到用户输入的文本，它只是用于您想要提供给用户的任何信息，例如某些程序员不使用而是label编写placeholder

<input type="text" placeholder="Enter Username Here" />

所以在这里你可以做到这一点，即你可以有一个预定义的http://值。

<input type="url" value="http://" />

或者，您可以使用 JavaScript 或 jQuery 进行客户端验证，而不是 HTML5，type="url"这只会赋予您的语义意义，但您不能仅依赖 HTML5 验证。

另外，如果您想通过使用或type值来保留语义，则可以禁用标签的 HTML5 验证使用属性。searchurlnovalidateform

或者

您可以使用多个字段，一个type设置为，url另一个设置为text，并且您可以连接两个字段值..

input[type=url] {
    width: 40px;
}

<input type="url" value="http://" readonly />
<input type="text" />

演示

注意：使用 HTML5 和 JavaScript 等客户端验证很容易被用户禁用，如果这对您来说很重要，我建议您进行服务器端验证。但是仅依赖客户端验证并不好。