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

Question

因此，我尝试将输入到输入框中的第一个字符大写，如下所示：

样式化的组件

<input type="button" value="iesniegt">

反应

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;
    }
  }
`;

我该如何解决？

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;
  }
}

演示：https://codepen.io/anon/pen/gyWebg