将符号附加到引导值的输入末尾

Question

我有一个接受百分比的输入字段，但是我想向用户表明他们输入的值是一个百分比。

我遇到的问题是我希望以百分号开头的文本，因此在输入中看起来像这样：100%或10000%，但是我不希望%成为实际输入的一部分。

有没有办法实现？我尝试了几种方法来使用CSS进行此操作，但是当%值实际上并未调整输入中的位置时，效果不佳。取而代之的是，它总是附加在输入字段的最后，而不是赶上输入。

该组件如下所示：

class Input extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isActive: false,
    }
  }

  render() {
    return (
    <div>
      <input 
        value={this.props.value} >
      </input>
    </div>
    )
  }
}

CSS：

div {
  input:after {
    content: '%';
    position: absolute;
    top: 3.4rem;
    z-index: 9999;
    color: blue;
    font-size: 2rem;

  }
}

我要实现的示例，下面的示例中突出显示的文本是我希望用户能够编辑的文本，并且%根据输入的长度动态移动。

Answer 1

通过在容器上使用数据属性很容易（因为input无法处理:before和:after，[More here]）和CSS content:attr()

update = function(el) {
  el.parentElement.setAttribute('data-value', el.value)
}

div[data-value] {
  position: relative;
}
div[data-value]:after {
  content: attr(data-value) "%";
  position: absolute;
  top: 2px; /* Borders */
  left: 2px; /* Borders */
}
div[data-value] input {
  color: #FFF; /* Optional bug avoid visual bugs */
}

<div data-value="0.01">
  <input value="0.01" oninput="update(this)"/>
</div>

PS：我是在vanillia上完成的，但是在React中很容易更新

Answer 2

使用jQuery：

$("#input").on("keyup", function(){
  $(this).val($(this).val().replace(/[^0-9]/gi, '') + '%')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input"/>

这样可以做到，因此末尾总会有一个％符号，他们不能删除它或添加除数字以外的任何内容！

如果您愿意，也可以将其转换为常规Javascript