如何：将输入到输入框中的第一个单词的首字母大写

Question

因此，我试图将输入框中输入的第一个字符大写，但没有成功，如下所示：

样式组件

const SearchStyles = styled.div`
  position: relative;
  input {
    width: 100%;
    padding: 10px;
    border: 0;
    font-size: 2rem;
    &.loading {
      animation: ${glow} 0.5s ease-in-out infinite alternate;
    }
    &:first-letter {
      text-transform: uppercase;
    }
  }
`;

应对

                  <input
                    {...getInputProps({
                      type: 'search',
                      placeholder: 'Search For An Item',
                      id: 'search',
                      className: this.state.loading ? 'loading' : '',
                      onChange: e => {
                        e.persist();
                        this.onChange(e, client);
                      },
                    })}
                  />

我该如何解决这个问题？

Answer 1

使用CSS不可能实现这一点。你需要使用一个contenteditable。

<input type="text" value="lowercase value" />
<br>
<div id="fakeinput" contenteditable>lowercase value</div>

input::first-letter {
  text-transform: uppercase; 
}

#fakeinput {
  display: inline-block;
  margin-top: 1em;
  width: 200px;
  border: 1px solid red;
  padding: 1em 2em;
  color: #000;
  &::first-letter {
    text-transform: uppercase;
  }
}

但是：ぁzxswい