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

Question

I would like every character entered into my HTML input box to get uppercased. Here's the approach I am trying using the latest Alpine.js available via CDN.

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

This seems to have zero effect. What's the right way of doing solving this problem?

Answer 1

There are a couple of things going on. First of all, you're binding to keydown but not assigning your uppercased value to any reactive property. Second is that you probably want to use x-bind:value .

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