JS实现小写字母自动转换大写字母

1. 描述
2. 思路
3. 操作步骤
4. 预览效果
5. 已完成模板

1. 描述

我们在数据库中一般把编号，编码等有字母的数据存成大写，在一些涉及到需要输入这些参数查询应用时，FineReport是没有设置文本控件自动转成大写选项的，如果在sql中再进行转换有时也显得较为麻烦，另外，在看起来也不是很美观，为此，使用本文档后可以直接设置文本控件输入内容后x小写字母自动转成大写字母。

2. 思路

利用JS提供的toUpperCase()方法可以对文本进行大写转换；或者利用jquery的keypress()方法可以监听对象的键盘按下事件，可以检测到将要输入的字符，再在里面时行转换后拼接到文本控件中，屏蔽默认的按键事件，也可以达到目的。

3. 操作步骤

3.1 方法一：编辑后事件进行转换

为文本控件增加一个编辑后事件，如下图：

222

代码如下：

this.setValue(this.getValue().toUpperCase());

这种是在编辑后进行转换的，可以实现需求，但是输入后可能会有短暂的转换时间，所以推荐使用方法二。

效果如下：

222

注：方法一支持移动端。

3.2 方法二：监听文本控件键盘事件

为文本控件添加一个初始化事件，如下图：

222

代码如下：

var $edit = $(this.editComp); //获得文本控件 var self = this; $edit.keypress(function(e) { var value = self.getValue(); if(e.key >= 'a' && e.key <= 'z') { e.key = e.key.toUpperCase(); //如果输入的是a到z的小写字母，转换成大写 $(this).val(value + e.key); //设置文本。 return false; //屏蔽原输入方法 } })

以上两种方法都可以实现，但是实际应用中，推荐使用方法二，因为监测的直接是键盘按键事件，优先级更高，体验也会比第一种要好。

效果如下，文本控件默认都转换成大写了，且没有延迟。

222