1. 概述
1.1 问题描述我们在数据库中一般把编号,编码等有字母的数据存成大写,在一些涉及到需要输入这些参数查询应用时,FineReport 是没有设置文本控件自动转成大写选项的,如果在 SQL 中再进行转换有时也显得较为麻烦,另外,在看起来也不是很美观,为此,使用本文档后可以直接设置文本控件输入内容后 x 小写字母自动转成大写字母。
1.2 实现思路利用 JS 提供的 toUpperCase() 方法可以对文本进行大写转换;或者利用 jQuery 的 keypress() 方法可以监听对象的键盘按下事件,可以检测到将要输入的字符,再在里面时行转换后拼接到文本控件中,屏蔽默认的按键事件,也可以达到目的。 2. 示例
2.1 方法一:编辑后事件进行转换为文本控件增加一个编辑后事件,如下图: 代码如下:
- this.setValue(this.getValue().toUpperCase());
复制代码
这种是在编辑后进行转换的,可以实现需求,但是输入后可能会有短暂的转换时间,所以推荐使用方法二。 效果如下:
注:方法一支持移动端。 2.2 方法二:监听文本控件键盘事件为文本控件添加一个初始化事件,如下图: 代码如下: - 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; //屏蔽原输入方法
- }
- })
复制代码
以上两种方法都可以实现,但是实际应用中,推荐使用方法二,因为监测的直接是键盘按键事件,优先级更高,体验也会比第一种要好。 效果如下,文本控件默认都转换成大写了,且没有延迟。
注:方法二不支持移动端。 2.3 预览效果保存模板,点击分页预览,PC 端效果如下所示: 1)方法一 2)方法二
移动端效果如下所示:
1)方法一 App 预览效果:
H5 预览效果:
2)方法二 方法二不支持移动端。 3. 模板下载1)方法一 模板效果在线查看请点击:JS 实现小写字母自动转换大写字母-方法一.cpt 已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\07-JS实现小写字母自动转换大写字母-方法一.cpt 模板见附件 2)方法二 模板效果在线查看请点击:JS 实现小写字母自动转换大写字母-方法二.cpt 已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\07-JS实现小写字母自动转换大写字母-方法二.cpt 模板见附件
编辑于 2020-12-17 16:15
|