将文本字段转换为大写

Convert textfield to uppercase

本文关键字：转换 文本 字段      更新时间：2023-09-26

我正在尝试强制文本字段将您输入的任何内容转换为大写。这是我一直在使用的行 

style: 'text-transform: uppercase'

它正在处理我的 90% 的文本字段，但是对于一个特定的文本字段，它将不起作用。它会将您键入的任何内容转换为文本字段，但是当您跳出文本字段时，由于某种原因，它会恢复为小写。

以下是文本字段的完整代码：

    {
    id: 'conditionValue',
    header: "Condition Value",
    dataIndex: 'condValue',
    width: 100,
    editor: newExt.form.TextField({
        style: 'text-transform: uppercase'
    }
})
}

你可以在不需要jQuery的情况下做到这一点，而是直接在Ext JS中：

{
    id: 'conditionValue',
    header: "Condition Value",
    dataIndex: 'condValue',
    width: 100,
    editor: newExt.form.TextField({
        listeners:{
           change:function(field){
                field.setValue(field.getValue().toUpperCase());
           }
        }
    })
}

也就是说，在 ExtJS 中执行此操作的最佳方法是使用 fieldStyle ，例如在您的 texfield 上：

fieldStyle: 'text-transform:uppercase'

而不是您当前设置style的位置

看到这个小提琴

尝试设置文本字段的 fieldStyle（从 ExtJS 4.0 开始可用），然后处理其change事件。

id: 'conditionValue',
header: "Condition Value",
dataIndex: 'condValue',
width: 100,
editor: newExt.form.TextField({
    fieldStyle: 'text-transform:uppercase;',
    listeners: {
       change: function(field, newValue, oldValue) {
           field.setValue(newValue.toUpperCase());
       }
    }
}

原因是，一旦你把注意力从文本字段之外，字段本身就会被隐藏，其内容就会被复制到表格单元格中（有点，实际上它通过记录和列渲染器）。将相同的 CSS 样式添加到列中，这应该可以做到。如果这还不够，请自定义列renderer。

相关文章：