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

【问题标题】：Change input text to upper case using Alpine.js使用 Alpine.js 将输入文本更改为大写
【发布时间】：2020-09-17 05:47:51
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript alpine.js

【解决方案1】：

有几件事正在发生。首先，您绑定到 keydown 但未将大写值分配给任何反应属性。其次是你可能想使用x-bind:value。

<input 
   x-data="{myText: '' }" 
   type="text" 
   @keyup="myText = $event.target.value.toUpperCase()"
   :value="myText"
   name="myText" 
   placeholder="Some Text"/>

【讨论】：

这在我修改 @change 以改用 @keyup 时有效。如果您可以验证，可以将此作为答案。
修改了，原理一样