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

Question

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

我可以有一个用户不能删除或写在它前面的“占位符”吗？

示例:http:// myinputhere.com

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

Answer 1

Placeholder 不会将 placeholder 文本连接到用户输入的文本，它只是用于您想要提供给用户的任何信息，就像一些程序员不使用 label 而不是他们写 placeholder 例如

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

所以在这里你可以这样做，要么你可以有一个预定义的 http:// 值..

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

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

---

另外，如果你想通过使用值为 search 或 url 的 type 来保留你的语义，那么你可以使用禁用 HTML5 验证novalidate form 标签的属性。

或

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

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

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

Demo

---

Note: Using client side validation like HTML5 and JavaScript can be easily disabled by your users, I would recommend you to have a server side validation if this matters to you alot.. But relying on client side validation ONLY is not good.