Upper text without affect placeholder label

[Ciprian-Catalin]

Hi,

I am using this css for automatically transform in upper text inserted in textbox control:

.uppercase {

    text-transform: uppercase;

}

After in html i am using this textbox that have label "TEST LABEL" setted with placeholder property:

<ejs-textbox

                    id="label"

                    placeholder="Test Label"

                    class="uppercase"

                    formControlName="test"

                    maxlength='2'

                    cssClass="e-outline e-small required"

                    floatLabelType="Auto">

</ejs-textbox>

Problem that i am facing is that also label become with upper like this: "TEST LABEL", I want only the text in input to be trasnformed with upper and label to remain how is defined.

There is some property that i can use for textbox for achieve this?

[Ciprian-Catalin]

Hi guys, any update for this? 

[Kokila Poovendran]

Hi Ciprian-Catalin,

Greetings from Syncfusion Support!

Thank you for reaching out to us with your query.

We have carefully reviewed your requirement and have prepared a sample that meets your needs. Please find the code snippet below:

 <ejs-textbox

          id="tetxBox"

          #default

          placeholder="First Name"

          floatLabelType="Auto"

          maxlength="2"

          cssClass="e-outline e-small required"

          (input)="onInput($event)"

        ></ejs-textbox>

 

[app.component.ts]

  public onInput(event: any) {

    this.textBoxObj.value = event.value.toLocaleUpperCase();

  }

 

 

 

We've achieved the desired behavior by utilizing the "input" event, ensuring that only the text entered in the input is transformed to uppercase. Please test these changes on your end to resolve the issue.

For your convenience, we've provided a sample that demonstrates this solution. You can access it bellow.

Sample: https://stackblitz.com/edit/angular-ynbpn7-iffoxw?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fapp.component.css

If you have any more questions or require further assistance, please don't hesitate to let us know. We're here to help!

Regards,

Kokila Poovendran.

[Ciprian-Catalin]

Hi,

Yes, but together with input event i am using also change event, and seem that when is present input event, in this case the change event is not called more.

This is the sample modified:

https://stackblitz.com/edit/angular-ynbpn7-wgxeux?file=src%2Fapp.component.ts

[Kokila Poovendran]

Hi Ciprian-Catalin

We apologize for the inconvenience you've experienced. After reviewing your query and the provided sample, it seems that the issue with the change event not being triggered is related to the manual alteration of the textbox value within the input event.

To address this, we've made adjustments using CSS styles to achieve the desired outcome instead of input event. You can find the updated CSS code snippet below:

[app.component.css]

.e-upper-textbox input:not(:placeholder-shown) {

  text-transform: uppercase;

}

You can also view the modified sample here : https://stackblitz.com/edit/angular-ynbpn7-bmgqd9?file=src%2Fapp.component.css,src%2Fapp.component.html,src%2Fapp.component.ts

Please let us know if this resolves your issue. If you have any further questions or concerns, don't hesitate to reach out.