如何添加基于文本的单位，例如浮动到输入元素内部（或外部）的“lbs”？

Question

是否可以在输入元素内插入单位？ 首选在

<input>

元素内部，但在外部也可以接受。

Answer 1

你可以使用这样的东西。

外箱：

<input></input><span style="margin-left:10px;">lb</span>

内盒：

<input style="padding-right:20px; text-align:right;" value="50"></input><span style="margin-left:-20px;">lb</span>

小提琴

Answer 2

您可以使用引导输入组组件。

注意：下面的例子使用了bootstrap 4类

<div class="input-group">
   <input type="number" class="form-control">
   <div class="input-group-append">
       <span class="input-group-text"> m </span>
   </div>
</div>

结果如下：

Answer 3

如果您希望单位显示在数字旁边，您可以尝试这个技巧（https://jsfiddle.net/ccallendar/5f8wzc3t/24/）。输入值呈现在位于输入顶部的 div 中，并隐藏值部分。这样单元就可以正确定位。只需确保使用相同的样式（字体大小、颜色、填充等）。

const input = document.getElementById("input");
const hiddenValue = document.getElementById("hiddenValue");
const unitsValue = document.getElementById("unitsValue");
input.addEventListener("input", () => {
  hiddenValue.innerHTML = input.value;
  // Only show units when there is a value?
  // unitsValue.innerHTML = (input.value.length > 0 ? " km" : "");
});

.wrapper {
  position: relative;
  width: 80px;
}

#input {
  border: 2px solid #fee400;
  background-color: #373637;
  width: 100%;
  font-family: serif;
  font-size: 18px;
  line-height: 25px;
  font-weight: normal;
  padding: 3px 3px 3px 10px;
  color: white;
}

.units {
  position: absolute;
  top: 0;
  left: 0;
  right: 10px;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  
  /* Match input styles */
  font-family: serif;
  font-size: 18px;
  line-height: 25px;
  font-weight: normal;
  
  /* includes border width */
  padding: 5px 5px 5px 12px;
  color: white;
  opacity: 0.8;
}

.invisible {
  visibility: hidden;
}

#unitsValue {
  /* Support spaces */
  white-space: pre;
}

<div class="wrapper">
  <input id="input"type="number" value="12" />
  <div class="units">
    <span class="invisible" id="hiddenValue">12</span>
    <span class="units-value" id="unitsValue"> km</span>
  </div>
</div>

Answer 4

我会通过使用

position: relative

和

left: -20px

在输入上轻推一个额外的元素（如跨度）来做到这一点。

然后在输入元素上添加一些

padding-right

，以确保用户的输入不会与新元素重叠。

示例如下：

https://jsfiddle.net/peg3mdsg/1/

Answer 5

由于您正在使用

bootstrap

，因此您可以使用

input-groups

组件并覆盖一些

bootstrap

样式：

HTML

<div class="input-group unity-input">
    <input type="text" class="form-control" placeholder="Enter unity value" aria-describedby="basic-addon2" /> <span class="input-group-addon" id="basic-addon2">
            lbs
        </span>

</div> 

CSS

.input-group {
    top:40px;
    width:auto;
}
.unity-input .form-control {
    border-right:0!important;
}
.unity-input .input-group-addon {
    background:white!important;
    border-left:none!important;
    font-weight:bold;
    color:#333;
}

小提琴

Answer 6

这里：（数字是任意的，您可以使用这些数字，重要的是浮动输入和保持测量单位的跨度上的负边距）

CSS：

#form>span {
    display: inline-block;
    padding-top: 5px;
    margin-left: -16px;
}
#form>input {
    padding: 5px 16px 5px 5px;
    float:left;
}

HTML：

<div id="form">
    <span class="units">lb</span>
    <input type="text" placeholder="Value" />
</div>

JSFiddle 演示

Answer 7

我在之前的所有答案中发现的问题是，如果更改单位的长度（例如，“欧元/月”而不是“磅”），则

<span>

元素将无法正确对齐。

我在另一篇文章中找到了更好的答案，而且非常简单：

HTML

<div class="wrapper">
  <input></input>
  <span class="units">lb</span>
</div>

CSS

.wrapper{
  position: relative;
}
.units {
  position: absolute;
  right: 14px (or the px that fit with your design);
}

这样，您甚至可以输入长单位，例如“欧元/月”，它仍然会正确定位。

Answer 8

使用引导：

            <label for="idinput">LABEL</label>
            <div class="input-group mb-3">
                <input class="form-control" name="idinput" type="text" pattern="(-?[0-9]+(\.[0-9]+)?)" [(ngModel)]="input"/>
                <div class="input-group-append">
                    <span class="input-group-text" id="basic-addon2">m3/s</span>
                </div>
            </div>

Answer 9

我知道我有点晚了，但我没有看到这里列出这个选项。基于 HTML 的内联样式解决方案很好，但我想尝试一种更基于 CSS 的方法。 这不适用于像

$

这样的前缀，因为 before 元素不能很好地处理负边距（为此使用 HTML 解决方案）。 在这种情况下，仍然需要

span

标签，因为

input

元素没有任何内容，因此 CSS 中设置的内容将被忽略。 我无法想出一种可靠的方法来设置与不同宽度的标签一起使用的边距宽度，并认为这可能是最适合我的情况的可扩展性和最容易使用的方法。

.label input {
  padding-right: 1em;
}
.label.lbs::after {
  display: inline-block;
}

.label.percent::after {
  content: '%';
  margin-left: -1.25em;
}

.label.lbs::after {
  content: 'lbs.';
  margin-left: -1.85em;
}

<span class="label percent"><input type=number value="73"/>
</span>

<span class="label lbs"><input type=number value="73"/>
</span>

Answer 10

严格使用 css 和 html 唯一可以尝试的就是占位符和文本左对齐。使用 jquery 你可以使用 .addClass 命令。

http://jsfiddle.net/JoshuaHurlburt/34nzt2d1/1/

input {
    text-align:right;
}