将不可编辑的静态文本放入 input[type=text] 字段（截图）答案

【问题标题】：Putting uneditable, static text inside of an input[type=text] field (screenshots)将不可编辑的静态文本放入 input[type=text] 字段（截图）
【发布时间】：2011-10-23 19:53:15
【问题描述】：

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

这是我希望用户访问页面时输入的样子：

这是我希望他们添加自己的输入时的样子：

这个问题的一半很简单，我可以为输入设置一个大的左填充，让它显示悬停效果，无论鼠标在哪里，并相应地放置输入。但问题是在不破坏其周围样式的情况下将文本放入输入行（并阻止用户选择静态文本，因此即使单击静态文本也会“聚焦”其后面的输入字段）。

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

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

感谢和抱歉这么长的描述！

【问题讨论】：

定义一个 div-element 以获得可见的 border。将基本 url 设置为 span-element 中的文本。在右侧添加一个文本输入并禁用输入字段的所有样式。
不确定这是一个可取的 UI 模式。用户自然会期望输入中的任何内容都是可编辑的。我见过的类似实现显示与输入相邻的“完整”字符串，并根据输入的内容动态更新它。

标签： html css input styling

【解决方案1】：

为什么不绕过这个问题，简单地将静态文本放在输入之外？

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

这在旧版/无脑浏览器中会很好地降级，在禁用 javascript 时有效，并且可以清楚地显示单独的输入在哪里。

【讨论】：

这也是我的第一个想法。我建议使用带边框的 div 和不带任何样式的输入来实现所需的样式。
我已经尝试过了，但 UX 团队的其他成员不喜欢它破坏页面样式/流程的方式
然后简单地捕获“更改”事件（模糊、keyup 等）并检查每次是否存在所需的文本。如果不是，则将其重新添加。这甚至是更糟糕的设计，但是如果外观胜过可用性，那么您将不得不服从人们的外观，其代价是使用户陷入困境。
好吧，我切换到了更标准的设置，输入字段的字符串在 keyup 上更新，显示最终字符串。希望它是直观的！
@MarcB 您可以将建议的解决方案放在 cmets 中作为答案中的一个选项。

【解决方案2】：

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

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

如果你点击标签，它会将焦点发送到输入。输入cursor:text; 会增加效果。您所要做的就是玩有大小和边框的游戏，一切就绪。

【讨论】：