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

How to add static text inside an input form

提问by Davor Budimir

How can I put this static text in an input form?

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

It's there all the time.

它一直都在。

This is my code:

这是我的代码：

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

回答by alessandrio

HTML

HTML

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

CSS

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

JS小提琴为此

回答by Rounin

You can achieve this with the following approach:

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

• place the <input>in a <label>with position:relative
• give the <label>an ::afterpseudo-element with position:absolute
• set box-sizingof the <input>to border-box
• give the <input>a padding-rightequal to the width of the ::afterpseudo-element

• 放在<input>一个<label>withposition:relative
• 给<label>一个::after伪元素position:absolute
• 集合box-sizing了中<input>到border-box
• 给<input>apadding-right等于::after伪元素的宽度

Working Example:

工作示例：

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;
}

<label data-domain="domain.com">
<input type="text" placeholder="exampledomain" />
<label>

回答by nerkn

The readonlyproperty should be used:

readonly应该使用该属性：

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

Because disabled controls that do not receive focus and are ignored in tabbing navigation, are not posted. The readonly property only can't be changed by the user.

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

回答by Lucy Mac

How about wrapping your inputinside a div(let's call it div.wrapper for ease), and then you can add some text in the div.wrapper with ".domain.com" aligned to the right? Like this for example:

将您的input内部包裹如何div（为了方便起见，我们将其称为 div.wrapper），然后您可以在 div.wrapper 中添加一些文本，“.domain.com”与右侧对齐？像这样例如：

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

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

You can style your div to make it look like your input and can make sure the actual input has no border, etc., so it's indistinguishable from div.wrapper.

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

It is a bit of a hack, but why not?

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

回答by GuillermoMP

I'm not sure if this can be accomplished using just one input form.

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

Maybe what you are seeing there is not a single input form, but an input form next to a static text.

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

So my idea here is to put an input form (where the user can write) followed by a static text (.domain.com). Then you can put both them inside a container and style the container to look like a input form.

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

This will do the trick.

这将解决问题。

回答by Ashish Gupta

In angular you can do this:

在角度你可以这样做：

In the html file add placeholder attribute to input with text variable: <input type="time" class="timepicker" placeholder="{{text_variable}}">

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

In the css:

在CSS中：

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

回答by Wollhaar

I′ve written an span and given it the bootstrap class .form-control, a grey background and filled in that span the static word.

我写了一个 span 并给它一个 bootstrap 类 .form-control，一个灰色的背景，并在那个 span 中填充了静态词。

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

But I think, the Answer of nerkn solves it′s best.

但我认为，nerkn 的答案解决了它的最好。