【参数界面JS实例】JS实现小写字母自动转换大写字母

我是社区第485122位番薯,欢迎点我头像关注我哦~
1. 概述
1.1 问题描述

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


1.2 实现思路

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

2. 示例
2.1 方法一:编辑后事件进行转换

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

代码如下:


  1. this.setValue(this.getValue().toUpperCase());
复制代码

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

效果如下:


注:方法一支持移动端。

2.2 方法二:监听文本控件键盘事件

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

代码如下:

  1. var $edit = $(this.editComp); //获得文本控件
  2. var self = this;
  3. $edit.keypress(function(e) {
  4.     var value = self.getValue();
  5.     if(e.key >= 'a' && e.key <= 'z') {
  6.         e.key = e.key.toUpperCase(); //如果输入的是a到z的小写字母,转换成大写
  7.         $(this).val(value + e.key); //设置文本。
  8.         return false; //屏蔽原输入方法
  9.     }
  10. })
复制代码

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

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


注:方法二不支持移动端。

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  

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0回帖数 1关注人数 3875浏览人数
最后回复于:2020-12-17 16:15

返回顶部 返回列表