入力フィールドの前にテキストを追加する方法
ジグナティウス
入力フィールドの左側とラベルの下にテキストを追加しようとして問題が発生しました。
Bootstrap4.3.1を使用しています。私のhtmlは次のようになります：
<div class="col-lg-6 col-md-6 col-sm-6">
<!-- some markup in here -->
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="row">
<label>Sensor URI:</label>
http://<input value="" type="text" id="sensor_uri" min="15" max="1440" class="form-control" required/>
</div>
</div>
これは次のようになります。
私が囲むようにいろいろなことを試してみた「のhttp：//」別の要素（で<p>、div>など）の任意の成功なし。理想的には、ユーザーが編集できないように、次のように入力フィールドの前に「http：//」を配置する必要があります。
どうすればいいですか？
FluffyKitten
あなたは2つのことをする必要があります-
form-control-inline入力でクラスを使用して、「http：//」テキストに沿って表示されるようにします- 入力とテキストをaなどのブロック要素でラップして
<div>、ラベルの下の独自の行に表示されるようにします。
- 注-sの
rowない余分なdivcolがあります-これは無効なので、以下で削除しました。
ここで実用的なスニペットを参照してください：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="col-lg-6 col-md-6 col-sm-6">
<!-- some markup in here -->
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<label>Sensor URI:</label>
<div class="inputwrapper">http:// <input value=" " type="text " id="sensor_uri " min="15 " max="1440 " class="form-control-inline" required/>
</div>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
テキストを入力した後、同じフィールドに入力を追加する方法
- 2
PHPを使用して複数の入力テキストフィールド値をdbに追加する方法
- 3
react-nativeのテキスト入力フィールドの前にテキストを表示する
- 4
入力テキストフィールドにJavascriptを入力する方法
- 5
フィールドにテキストを入力する別の方法
- 6
フォーム内の入力テキストフィールドの名前を取得する方法
- 7
入力フィールドテキストにパディングを追加する方法[CSS]
- 8
ユーザーテキストフィールド入力後に値を自動追加する方法
- 9
クリック時に入力フィールドにテキストを追加する方法は？
- 10
前のセルのテキストフィールドが入力されている場合は、UITableViewにセルを追加します
- 11
ファイルされたテキストを入力するときにテキストフィールド文字の間にスペースを追加する
- 12
入力ビューをテキストフィールドiOS 8に追加するときのエラー
- 13
マテリアルUIの入力フィールドの前にドル記号を追加する方法
- 14
Swift の UIPicker からテキスト フィールドに入力する方法
- 15
他のテキストフィールドに値を入力するときにテキストフィールドをクリアする方法
- 16
テキストフィールドからの入力を印刷する方法は？
- 17
javascriptの入力テキストフィールドを削除する方法
- 18
入力テキストフィールドのテキストをフォーマットする方法
- 19
Pythontkinterの入力フィールドまたは入力フィールドでテキストをかすかに無効にする方法
- 20
JavaScriptの入力フィールドにテキストを出力する
- 21
テキストフィールドへの入力中に空白を削除する
- 22
puppeteerを使用してテキスト入力フィールドの現在の値にアクセスする方法
- 23
1つのフィールド名に3つのテキストボックス値を入力する方法
- 24
ユーザーが入力フィールドにテキストを入力するのを停止します
- 25
javascriptを使用してテキストフィールドにテキストを入力する方法
- 26
プレースホルダー/入力テキストを入力フィールドの中央に配置し、カーソルを左揃えにする方法
- 27
Javaを使用してSelenium WebDriverの非表示フィールドにテキストを入力する方法
- 28
値を入力しながらテキストフィールドの幅を動的に変更する方法
- 29
Symfony3.1.1フォームの入力テキストフィールドにマスクを追加します
コメントを追加