How to show input field in only Uppercase using Oracle Jet oj-input-text?

Question

I want to show letters only in uppercase in input text field.

<oj-input-text style="text-transform: uppercase;" id="text-input" placeholder="Select new Item number"
                         value="{{newItemNumber}}"></oj-input-text>

I have tried adding css "text-transform: uppercase" property to the element but that did not work. I also wrapped the element in a span and added css property but of no use. I want the input field to convert and show all input letters to uppercase as the user types. Is there a way to do it in ojet?

Answer 1

Thank you for your response. I realized that we can access and edit the input tag inside oj-input-text and perform our operations accordingly. Following code fixed my problem:

<oj-input-text id="text-input" placeholder="Select new Item number"
                                      value="{{newItemNumber}}">
                           <input data-oj-internal="" type="text"
                                  class="oj-inputtext-input oj-text-field-input oj-component-initnode"
                                  placeholder="Select new Item number" id="text-input|input" oninput="let p = this.selectionStart; this.value = this.value.toUpperCase();this.setSelectionRange(p, p);">
                       </oj-input-text>

Answer 2

Another possibility besides OP's answer is to change the value when raw data (on each key pressed) is changed, e.g.

<oj-input-text value="{{newItemNumber}}" on-raw-value-changed="[[uppercaseMe]]"></oj-input-text>

class ViewModel {
  constructor() {
    const self = this;
    self.newItemNumber = ko.observable();
    self.uppercaseMe = (event) => self.newItemNumber(event.detail.value.toUpperCase());
  }
}

It's not perfect as you sometimes can see the last lowercase-pressed character for a fraction of a second but does the job.