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

  • 文档创建者:yets11
  • 编辑次数:11次
  • 最近更新:Kevin-s 于 2019-11-19
  • 1. 概述

    1.1 问题描述

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


    1.2 实现思路

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

    2. 示例

    2.1 方法一:编辑后事件进行转换

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

    image.png

    代码如下:

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


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

    效果如下:

    222

    注:方法一支持移动端。

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

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

    image.png

    代码如下:

    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

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

    2.3 预览效果

    保存模板,点击分页预览,PC 端效果如下所示:

    1)方法一

    222

    2)方法二

    222


    移动端效果如下所示:

    1)方法一

    App 预览效果:

    222

    H5 预览效果:

    222

    2)方法二

    方法二不支持移动端。


    3. 模板下载

    1)方法一

    模板效果在线查看请点击:JS 实现小写字母自动转换大写字母-方法一.cpt

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

    点击下载模板:07-JS实现小写字母自动转换大写字母-方法一.cpt

    2)方法二

    模板效果在线查看请点击:JS 实现小写字母自动转换大写字母-方法二.cpt

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

    点击下载模板:07-JS实现小写字母自动转换大写字母-方法二.cpt


    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!