输入的静态占位符答案

【问题标题】：Static placeholder for input输入的静态占位符
【发布时间】：2012-05-23 12:43:57
【问题描述】：

我不知道这个问题的正确标题是什么。我有带有“静态占位符”的输入框，例如 url jsfiddle.net/manyahin/MxRqX

<div class="controls">
 <input type="text" />
 <span>http://</span>
</div>

用户不能删除 http:// 并在此之后输入文本。 Span 有 margin-left: minus 表示输入上方的位置，输入有 text-ident 以获得 span 的可用空间。

当我点击输入时，光标设置在输入的开头，在 http 之前。当我开始打字时，光标会转到正常位置。如何修复此错误或请给我另一种方法来实现此目的。对不起我的英语不好。

【问题讨论】：

您能否在jsfiddle.net 上发布您想要实现/修复的工作版本，以便我们进行处理？
你可能不应该在这里做任何你想做的事情，但是如果你想告诉用户他应该输入一个不带 http:// 前缀的 URL（这将被暗示），那么你可以只使用http://<input type="text">。或者，更好的是，只使用。通常情况下，人们会复制和粘贴 URL（并且应该这样做），因此试图让他们省略 http:// 是一种麻烦，对他们来说并不方便。
当然，jsfiddle.net/manyahin/MxRqX

标签： html css

【解决方案1】：

如果输入文本总是需要以 http:// 开头，更简单的方法是将其作为标签放在字段之前而不是在字段中，然后在后端添加 http://。或者您可以在后端捕获它并从输入字段中读取文本，如果用户没有输入，则将 http:// 添加到输入文本。

另一种方法是通过 jquery，您可以使用用户输入的任何文本将文本框的值设置为 http://。

第三种不太优雅的方法是使用两个输入字段并使用 css 来定位和设置样式以使其显示为一个。将第一个字段值设置为 http://（假设它始终为 http://）并将其设置为只读。

【讨论】：

【解决方案2】：

在css中使用:before怎么样？

【讨论】：

我正在寻找像您这样的答案，但是您提供的示例不起作用。
您不能在输入等元素上使用 :before 和 :after 等伪元素。内容渲染需要在容器内，输入不是容器。
但是，你可以把它放在占位符上 :) 像这样：input::-webkit-input-placeholder:before。不要忘记为跨浏览器解决方案使用所有“moz、ms、webkit”前缀。