JS Instantly Convert Lower Cases into Upper Cases

  • Last update:  2020-12-23
  • I. Overview

    1.1 Requirement

    Generally, data containing alphabets, such as numbers and codes, is stored in upper case in the database.

    When querying these numbers, users may type lower cases accidentally, resulting in query failures, so some clients wish that Text widgets could automatically convert lower cases they have typed into upper cases.

     

    1.2 Solution

    Method 1: Text can be converted into upper cases through toUpperCase() designed for strings in JavaScript. Despite some delay, this method supports mobile terminals.

    Method 2: keypress() in jQuery can be used to monitor Keyboard Press events of an object and convert characters to be typed into upper cases before splicing them into a Text widget. This method is fast and delay-free, but is not available on mobile terminals.

    II. Sample

    2.1 Method 1

    Add an After Editing event to the Text widget, as shown below:

     

    Input the following JavaScript codes:

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

    The effect is shown below:

     

    2.2 Method 2

    Add an After Initialization event to the Text widget, as shown below:

    Input the following JavaScript codes:

    var $edit = $(this);var self = this;$edit.keypress(function(e) {
        var value = self.getValue();
        if(e.key >= 'a' && e.key <= 'z') {
            e.key = e.key.toUpperCase();
            $(this).val(value + e.key);
            return false;
        }
    })

    The effect is shown below. Lower cases typed in the Text widget are by default converted into upper cases without any delay.

    In practical application, Method 2 is recommended if there is no need for conversion into upper cases on mobile terminals.

    III. Download the templates

    Attachment List


    Theme: Parameter
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy