Question

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

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

示例： http：// myinputhere.com

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

Answer 1

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

placeholder

所以你可以这样做，要么你有一个预定义的<input type="text" placeholder="Enter Username Here" />值..

http://

或者你可以使用JavaScript或jQuery进行客户端验证，而不是HTML5 <input type="url" value="http://" />，这只会给你的语义带来意义，但你不能只依赖HTML5验证。

此外，如果您希望使用值type="url"或type的{{1}}来保留语义，则可以使用novalidate属性禁用HTML5验证{ {1}}标记。

OR

您可以使用多个字段，一个search设置为url，另一个设置为form，您可以连接两个字段值。

type

Demo

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

Answer 2

为什么不使用javascript来执行此操作。我假设你有这样的HTML标签

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

并尝试以下javascript

function testJS(){
   var a = document.getElementById("test");
   a.value = "http://";
}

Answer 3

您可以在输入上显示span元素，如下所示：

HTML：

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

CSS：

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

Example

Answer 4

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

该问题意味着错误的方法，因为a）用户可能需要删除http：//，例如如果他们需要输入https：URL，b）占位符不是为了这个，c）如果你使用value="http://"，它不是一个有意义的默认值，它使控件最初无效，d）如果你使用{ {1}}，您要求获取一个控件，该控件将绝对URL作为值并将其留给浏览器来实现。

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

title

Answer 5

您可以使用Javascript和jQuery来执行此操作。（仍在寻找解决方案）

或者您可以将http：//文本放在文本框中：

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

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

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

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

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

5 个答案: