时间戳

首页 > 解决方案 > 将符号附加到导致值的输入末尾

html - 将符号附加到导致值的输入末尾

问题描述

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

我遇到的问题是我想要百分比来引导文本，所以在输入中它看起来像这样：100%or 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;

  }
}

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

在此处输入图像描述

在此处输入图像描述

标签： htmlcssreactjs

解决方案

通过在容器上使用 data-attribute 很容易（因为input无法处理:beforeand :after，[More here]）和 CSScontent: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 中很容易更新

推荐阅读