Html 如何在输入表单中添加静态文本

如何将此静态文本放入输入表单中

它一直在那里

这是我的代码：

<label for="subdomain">Subdomain:</label>
<input type="text" placeholder="ExampleDomain" id="subdomain"/>

子域：

我不确定是否可以只使用一个输入表单来完成

也许你看到的不是一个单一的输入表单，而是一个静态文本旁边的输入表单

因此，我的想法是将一个输入表单（用户可以在其中写入）后跟一个静态文本（.domain.com）。然后，您可以将它们放在一个容器中，并将容器设置为类似于输入表单的样式

这就可以了。

HTML

---

应使用

只读

属性：

<label for="subdomain">Subdomain:</label>
<input type="text" placeholder="ExampleDomain" id="subdomain" />
<input type="text" id="subdomaintwo" value=".domain.com" readonly="readonly" />

子域：

---

因为禁用的控件不接收焦点并且在选项卡导航中被忽略，所以不会发布。只读属性只能由用户更改。

如何将您的

输入

包装在

div

中（为了方便起见，我们称之为div.wrapper），然后您可以在div.wrapper中添加一些文本，并将“.domain.com”对齐到右侧？例如：

.domain.com

您可以设置div的样式，使其看起来像您的输入，并可以确保实际输入没有边框等，因此它与div.wrapper无法区分

---

这有点像黑客，但为什么不呢？

您可以通过以下方法实现这一点：

• 将
  放置在
  位置为相对的

  中

• 给
  一个

  ：：在
  伪元素之后加上
  位置：绝对

• 将
  的

  框大小设置为
  边框框

• 在

  伪元素之后，给
  一个等于
  ：：宽度的
  右填充
  

工作示例：

标签，输入{
位置：相对位置；
显示：块；
右边填充：76px；
宽度：170px；
框大小：边框框；
}
标签：：之后{
内容：'.'属性（数据域）；
位置：绝对位置；
顶部：4px；
左：94px；
字体系列：arial、helvetica、无衬线字体；
字体大小：12px；
显示：块；
颜色：rgba（0,0,0,0.6）；
字体大小：粗体；
}

---

在angular中，您可以执行以下操作：

在html文件中，使用文本变量将占位符属性添加到输入：

在css中：

.timepicker:before {
    content:'.' attr(placeholder);
    margin-right:5px;
    color:#9d9d9d;
}

---

我已经写了一个span，并给它一个bootstrap类。form控件，一个灰色背景，并在该span中填充静态单词

<span class="form-control bg-grey">Exampledomain</span>

Exampledomain

---

但是我认为，nerkn的答案是最好的。

你能详细说明一下你想要实现什么吗？使用dom检查器/调试器，看看在使用这种技术的地方是如何实现的。你可能会发现这是一个绝对定位的divI绘图，这是photoshop。现在我不知道怎么做：）所以我需要在输入中输入文本。不低于，不高于输入。我只是喜欢你问这个问题的方式。图片比文字更有意义&它传达了更好的结果。虽然这是有价值的信息，但这应该作为对艾薇儿答案的评论发布。

.timepicker:before {
    content:'.' attr(placeholder);
    margin-right:5px;
    color:#9d9d9d;
}

<span class="form-control bg-grey">Exampledomain</span>