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

编辑
文档创建者:yets11 (67190 )     浏览次数:2163次     编辑次数:7次     最近更新:jiangsr 于 2018-05-24     

目录:

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

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

4. 预览效果编辑

4.1 PC端预览效果

1)方法一

222

2)方法二

222

4.2 移动端预览效果

1)方法一

APP预览效果:

222

H5预览效果:

222

2)方法二

方法二不支持移动端。

5. 已完成模板编辑

1)方法一

已完成的模板,可参见:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\参数界面JS实例\07-JS实现小写字母自动转换大写字母-方法一.cpt

2)方法二

已完成的模板,可参见:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\参数界面JS实例\07-JS实现小写字母自动转换大写字母-方法二.cpt

附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?