如何仅使用Oracle Jet OJ-Input-Text在大写中显示输入字段？

发布于 2025-01-26 17:40:11 字数 360 浏览 3 评论 0原文

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

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

我尝试在元素中添加CSS“ Text-Transform：UpperCase”属性，但无效。我还将元素包裹在一个跨度中并添加了CSS属性，但没有用。我希望输入字段将所有输入字母转换为大写字母，作为用户类型。有没有办法在OJET中进行？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

许仙没带伞 2025-02-02 17:40:11

谢谢您的回复。我意识到我们可以在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>

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>

回复收藏 0 原文

听你说爱我 2025-02-02 17:40:11

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

它并不完美，因为有时您可以看到最后一秒钟的最后一个小写字符，但要完成工作。

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.

回复收藏 0 原文

~没有更多了~