使用 Alpine.js 将输入文本更改为大写

Question

我希望输入到我的 HTMLinput框中的每个字符都变成大写。这是我尝试使用可通过 CDN 获得的最新 Alpine.js 的方法。

<input 
   x-data="{myText: '' }" 
   x-text="myText" type="text" 
   @keydown="myText.toUpperCase();" 
   name="myText" 
   placeholder="Some Text"/>

这似乎效果为零。解决这个问题的正确方法是什么？

Answer 1

有几件事正在发生。首先，您绑定到 keydown 但没有将大写值分配给任何反应性属性。其次是您可能想使用x-bind:value.<input&nbsp; &nbsp;&nbsp;&nbsp;x-data="{myText:&nbsp;''&nbsp;}"&nbsp; &nbsp;&nbsp;&nbsp;type="text"&nbsp; &nbsp;&nbsp;&nbsp;@keyup="myText&nbsp;=&nbsp;$event.target.value.toUpperCase()" &nbsp;&nbsp;&nbsp;:value="myText" &nbsp;&nbsp;&nbsp;name="myText"&nbsp; &nbsp;&nbsp;&nbsp;placeholder="Some&nbsp;Text"/>