使用 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 
   x-data="{myText: '' }" 
   type="text" 
   @keyup="myText = $event.target.value.toUpperCase()"
   :value="myText"
   name="myText" 
   placeholder="Some Text"/>