javascript - 末尾带有货币符号的 HTML5 数字输入字段

Question

我想要一个包含 EUR 符号的 html5 数字输入字段，并且无论对该字段进行何种编辑，该符号都将保持不变。我尝试这样做，但 EUR 符号不会出现在该字段内，我想在输入的末尾移动这个符号，但由于某种原因，我不能这样做。我不想删除类表单控件。有什么帮助吗？

我的片段:

.input-symbol-euro {
  position: relative;
}

.input-symbol-euro input {
  padding-right: 15px;
}

.input-symbol-euro:after {
  position: absolute;
  top: 0;
  content: "€";
  right: 0px;
}

.form-control {
  display: block;
  width: 50%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  cursor: not-allowed;
  background-color: #eee;
  opacity: 1;
}

<span class="input-symbol-euro">
    <input type="number" value="0" min="0" step="1" class="form-control"  />
</span>

Answer 1

您需要提供 <span>某种有用的 display属性，以便它包装 <input> .默认情况下，此元素的值为 inline .在下面的示例中，我使用了 inline-block ，但是 block会做的很好。

查看更新 fiddle .

.input-symbol-euro {
  position: relative;
  display: inline-block;
  width: 50%;
}

.input-symbol-euro input {
  padding-right: 15px;
  width: 100%;
}

.input-symbol-euro:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
  content: "€";
  right: 20px;
}

.form-control {
  display: block;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  cursor: not-allowed;
  background-color: #eee;
  opacity: 1;
}

<span class="input-symbol-euro">
    <input type="number" value="0" min="0" step="1" class="form-control"  />
</span>