如何使用 Oracle Jet oj-input-text 仅以大写形式显示输入字段？答案

【问题标题】：How to show input field in only Uppercase using Oracle Jet oj-input-text?如何使用 Oracle Jet oj-input-text 仅以大写形式显示输入字段？
【发布时间】：2022-06-30 22:43:12
【问题描述】：

我想在输入文本字段中只显示大写字母。

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

我尝试将 css "text-transform: uppercase" 属性添加到元素，但没有奏效。我还将元素包装在一个 span 中并添加了 css 属性，但没有用。我希望输入字段在用户键入时将所有输入字母转换并显示为大写。有没有办法在 ojet 中做到这一点？

【问题讨论】：

也许你可以试试这样 oj-input-text [value="{{newItemNumber}}"]{text-transform: uppercase}

标签： javascript html css oracle oracle-jet

【解决方案1】：

感谢您的回复。我意识到我们可以访问和编辑 oj-input-text 中的输入标签并相应地执行我们的操作。以下代码解决了我的问题：

<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>

【讨论】：

【解决方案2】：

除了 OP 的答案之外的另一种可能性是在原始数据（按下的每个键上）发生更改时更改值，例如

<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());
  }
}

这并不完美，因为有时您可以在几分之一秒内看到最后一个小写字母，但确实可以。

【讨论】：