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

编辑
  • 文档创建者:yets11
  • 浏览次数:4186次
  • 编辑次数:9次
  • 最近更新:Kevin-s 于 2019-06-21
  • 1. 描述

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

    2. 思路

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

    3. 操作步骤

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

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


    代码如下:

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

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

    效果如下:


    注:方法一支持移动端。

    3.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; //屏蔽原输入方法
        }
    })

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

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


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

    4. 预览效果

    4.1 PC 端预览效果

    1)方法一

    2)方法二


    4.2 移动端预览效果

    1)方法一

    App 预览效果:


    H5 预览效果:


    2)方法二

    方法二不支持移动端。


    5. 已完成模板

    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

    点击下载模板


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

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

    此页面有帮助吗?只是浏览 [ 去社区提问 ]