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

Question

我希望输入 HTML input 框中的每个字符都大写。这是我尝试使用可通过 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"/>

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

Change input text to upper case using Alpine.js

javascript

alpine.js