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

我的表单中有一个URL字段。 验证器要求它前面有

http://

， 我想很多人都不会理解

我可以有一个用户不能删除或写入的“占位符”吗

示例：http://myinputhere.com

---

占位符不会将

占位符

文本连接到用户输入的文本，它只是用于您想向用户提供的任何信息，例如，一些程序员不使用

标签

，而是编写

占位符

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

或者，您可以使用JavaScript或jQuery进行客户端验证，而不是使用HTML5

type=“url”

，这只会赋予您的语义意义，但您不能仅依赖HTML5验证

---

另外，如果您想通过使用值为

search

或

url

的

type

来保留语义，那么您可以使用

表单

标记的属性禁用HTML5验证

或

您可以使用多个字段，一个字段的

类型设置为
url
，另一个字段设置为
text
，您可以将两个字段值串联起来

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

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

input[type=url]{
宽度：40px；
}



注意：可以使用客户端验证，如HTML5和JavaScript
很容易被用户禁用，我建议您使用服务器
如果这对您很重要，请进行侧验证。。但是依靠客户
只进行侧面验证是不好的

为什么不使用javascript来实现这一点呢。我假设您有这样的HTML标记

<input id="test" type="url" onclick="testJS()" placeholder="http://">

您可以使用Javascript和jQuery来实现这一点。（仍在寻找解决方案）

或者，您可以将http://文本放在文本框中，其中包含：

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



或者，您可以在文本框前面添加一些文本，然后接受不带http://text的输入

<p style='display: inline-block'>http://</p><input type='url' style='display: inline-block'>

http://

您还可以使用css定位在输入框上显示span元素，然后在输入框中添加填充，以便用户输入不会覆盖span元素。
您可以在输入上显示span元素，如下所示：

HTML:

否，您不能有无法删除的初始内容

这个问题暗示了一种错误的方法，因为a）用户可能需要删除http://例如，如果他们需要输入https:URL，b）占位符不适用于此，c）如果您使用
value=“http://”
，它不是一个有意义的默认值，它会使控件最初无效，d）如果您使用
type=“URL”
，您需要一个以绝对URL为值的控件，并将其留给浏览器来实现

您可以帮助不知道如何键入绝对URL的用户使用
title
属性，该属性在这样的上下文中具有特殊功能：如果用户在控件值无效时尝试提交表单，其值将出现在浏览器显示的错误消息中。例如：

<input type="url" title="An absolute URL (usually starts with http://)">


与包含文本“http://”的表单类似，占位符不能用于此操作。当用户启动时，占位符文本将消失typing@techfoobar验证器只检查
@user109899-啊，对了。我没想到@AzizShaikh它不必是占位符。事实上，它应该只是字段中的文本，所以验证器会识别它。HTML 5标准严格禁止使用占位符而不是标签-您可以将答案中的重点从“而不是”更改为其他信息。我对JS非常陌生，如果您能给我一个代码示例，我将不胜感激<代码>值

工作正常，但它可以被删除，这不好。@pwdst我经常这样做，你能给我一个链接说吗？@user109899 JS验证或HTML5验证可以很容易地使用控制台进行黑客攻击，所以不要依赖它，我还可以为

http://

创建一个带有

readonly

属性的单独字段，但它可以被黑客攻击为well@Mr.Alien它不是一些需要不可压缩验证的绝密级别的网站，而是一个过滤大部分垃圾邮件的工作网站。注意：如果JS被禁用，这将失败1。你可以删除它。2.如果再次单击，它会从

http://

的方式中删除所有内容。@Mr.Alien这些天禁用javascript的用户应该得到一个糟糕的UI。如果不想让人觉得我在挑剔你，那么在用户从URL中忽略协议（http://或https://）的情况下，这如何帮助使输入值有效？如果提供了http://这一事实，那么用户很可能会忽略该协议，因为它似乎已经为您提供了。它还排除了https://站点。这次我没有投票给你，但是请考虑你的回答。谢谢，这正是我所需要的。

<p style='display: inline-block'>http://</p><input type='url' style='display: inline-block'>

<div class="wrapper">
    <input type="url" />
    <span>http://</span>    
</div>

.wrapper {
    position: relative;
}
input {
    padding-left: 48px;
}
.wrapper span {
    position: absolute;
    left: 2px;
}

<input type="url" title="An absolute URL (usually starts with http://)">