web-dev-qa-db-ja.com

入力フォーム内に静的テキストを追加する方法

この静的テキストを入力フォームに配置するにはどうすればよいですか？

いつもそこにあります。

Enter image description here

これは私のコードです：

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

HTML

<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

10
alessandrio

これは、次の方法で実現できます。

  • <input>を<label>にposition:relativeを付けて配置します
  • <label>と::after疑似要素をposition:absoluteで
  • box-sizingの<input>をborder-boxに設定
  • <input>擬似要素の幅と等しいpadding-right a ::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;
}
<label data-domain="domain.com">
<input type="text" placeholder="exampledomain" />
<label>
9
Rounin

readonlyプロパティを使用する必要があります：

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

フォーカスを取得せず、タブナビゲーションで無視される無効なコントロールは投稿されないため。 readonlyプロパティはユーザーのみ変更できません。

3
nerkn

inputをdiv内にラップして（簡単にdiv.wrapperと呼ぶことにしましょう）、「。domain.com」を配置したdiv.wrapperにテキストを追加できます権利？たとえばこのように：

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

Divをスタイル設定して入力のように見せたり、実際の入力に境界線などがないことを確認したりできるため、div.wrapperと区別できません。

少しハックですが、なぜですか？

2
Lucy Mac

これを1つの入力フォームだけで実行できるかどうかはわかりません。

単一の入力フォームではなく、静的テキストの横にある入力フォームが表示されている場合があります。

したがって、ここでのアイデアは、入力フォーム（ユーザーが記述できる場所）の後に静的テキスト（.domain.com）を配置することです。次に、両方をコンテナー内に配置し、コンテナーを入力フォームのようにスタイル設定できます。

これでうまくいきます。

1
GuillermoMP

私はスパンを書いて、それにbootstrap class .form-control、灰色の背景を与え、静的なWordにそのスパンを記入しました。

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

しかし、私は、nerknのAnswerが最善の解決策だと思います。

0
Wollhaar

angularでこれを行うことができます：

HTMLファイルで、テキスト変数を使用して入力するプレースホルダー属性を追加します：<input type="time" class="timepicker" placeholder="{{text_variable}}">

CSSでは：

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