Question

我正在开发一个应用程序，用户可以在其中选择其个人资料的网址ala facebook.com/name。一切都很顺利，除了我在输入中添加一组静态文本的样式问题，以帮助传达拥有自己的URL的消息。

以下是我希望用户访问该页面时输入的内容： enter image description here

以下是我们希望它们添加自己的输入时的样子： enter image description here

这个问题的一半很简单，我可以设置一个大的左边距到输入，让它显示悬停效果，无论鼠标在哪里，并相应地放置输入。但问题是将文本放入输入行而不破坏它周围的样式（并阻止用户能够选择静态文本，这样即使单击静态文本也会“将焦点”输入其后面）。 / p>

我真的更喜欢使用纯HTML / CSS，但如果必须使用Javascript则可以使用Javascript。

这就是我现在的位置，目标是将“www.website.com”文本放入输入字段，而不会破坏textarea的样式：http://jsfiddle.net/rUkS8/1/

感谢并抱歉这么长的说明！

Answer 1

为什么不绕过问题，只是在输入之外放置那个静态文本？

www.website.com/<input type="text" name="url" />

这在旧版/脑死亡浏览器中很好地降级，在禁用javascript时起作用，并使输入的单独位置显而易见。

Answer 2

如果您使用标签和for属性，它将为您处理点击事件：

<div style="border:1px solid #000;">
    <label for="textinput" style="cursor:text;">asdf</label>
    <input type="text" id="textinput">
</div>

如果单击标签，它会将焦点发送到输入。放cursor:text;会增加效果。你所要做的就是玩大小和边界的游戏，你们都已经准备好了。