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

Question

如何将此静态文本放在输入表单中？它一直都在那里。

这是我的代码：

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

Answer 1

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

CSS

input[type="text"]#subdomaintwo{
    -webkit-appearance:none!important;
    color:red;
    text-align:right;
    width:75px;
    border:1px solid gray;
    border-left:0px;
    margin:0 0 0 -7px;
    background:white;
}
input[type="text"]#subdomain{
    -webkit-appearance:none!important;
    border:1px solid gray;
    border-right:0px;
    outline:none;
}

JS Fiddle for this

Answer 2

您可以通过以下方法实现此目的：

• 将<input>放入<label> position:relative
• 为<label> ::after伪元素提供position:absolute
• 将box-sizing的{​​{1}}设置为<input>
• 将border-box <input>等于padding-right伪元素的宽度

工作示例：

::after

label, input {
position: relative;
display: block;
padding-right: 76px;
width: 170px;
box-sizing: border-box;
}

label::after {
content: '.' attr(data-domain);
position: absolute;
top: 4px;
left: 94px;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
display: block;
color: rgba(0, 0, 0, 0.6);
font-weight: bold;
}

Answer 3

应使用Readonly属性：

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

由于禁用的控件未获得焦点，因此在标签导航中会被忽略，因此不会发布。 Readonly属性只能由用户更改。

Answer 4

如何将input包裹在div内（让我们称之为div.wrapper以方便），然后您可以使用＆＃34在div.wrapper中添加一些文字; .domain.com＆＃34;对齐右边？像这样举例如：

<div class="wrapper"> <input type="text" name="subdomain"/> <p class="input-text">.domain.com</p> </div>

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

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

Answer 5

我不确定这是否可以仅使用一种输入表单来完成。

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

所以我的想法是输入一个输入表单（用户可以写的地方），然后是静态文本（.domain.com）。然后，您可以将它们放在容器中，并将容器设置为看起来像输入表单。

这样就可以了。

Answer 6

您可以执行以下操作：

在html文件中，添加占位符属性以使用文本变量输入： <input type="time" class="timepicker" placeholder="{{text_variable}}">

在CSS中：

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

Answer 7

我已经编写了一个跨度，并给了它引导类.form-control，一个灰色背景，并在该跨度中填充了静态单词。

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

但是我认为，nerkn的答案可以解决问题。

Answer 8

<div style="border: 1px solid gray; display: inline; padding: 2px">
  <input type="text" style="outline: 0; border: 0;">
  <span>.domain.com</span>
</div>

https://stackblitz.com/edit/js-omhuwp?file=index.html