自定义js完成键盘事件监听

用快捷方式输入罗马字符  打包好的资源链接https://download.csdn.net/download/camel_gold/14918012.使用前需引入jquery.js

/**
 * @ProjectName: sfhk
 * @Author: 小王
 * @Date: 2021/1/21 23:26
 * @Description: 监听键盘事件打出罗马字符,这里需要Alt+数字1~0替换罗马字符1~10
 * 键盘事件对应的键码:
 *keyCode 48 = 0 equal braceright
 *keyCode 49 = 1 exclam onesuperior
 *keyCode 50 = 2 quotedbl twosuperior
 *keyCode 51 = 3 section threesuperior
 *keyCode 52 = 4 dollar
 *keyCode 53 = 5 percent
 *keyCode 54 = 6 ampersand
 *keyCode 55 = 7 slash braceleft
 *keyCode 56 = 8 parenleft bracketleft
 *keyCode 57 = 9 parenright bracketright
 * altKey=Alt
 */
(function ($) {
    $(window).keydown(function (e) {
        if (e.altKey) $(e.target).keyboardReplace(e.keyCode,e.ctrlKey);//调用键盘事件
    });
    $.fn.extend({
        /*
        * 键盘事件监听,暂时考虑两种情况
        * 1:如果有选中则替换
        * 2:如果没有选中则追加
        * */
        keyboardReplace:function (keyCode) {
            switch (keyCode){
                case  48:
                    this.val(this.isReplace('Ⅹ'));
                    break;
                case  49:
                    this.val(this.isReplace('Ⅰ'));
                    break;
                case  50:
                    this.val(this.isReplace('Ⅱ'));
                    break;
                case  51:
                    this.val(this.isReplace('Ⅲ'));
                    break;
                case  52:
                    this.val(this.isReplace('Ⅳ'));
                    break;
                case  53:
                    this.val(this.isReplace('Ⅴ'));
                    break;
                case  54:
                    this.val(this.isReplace('Ⅵ'));
                    break;
                case  55:
                    this.val(this.isReplace('Ⅶ'));
                    break;
                case  56:
                    this.val(this.isReplace('Ⅷ'));
                    break;
                case  57:
                    this.val(this.isReplace('Ⅸ'));
                    break;
            }
        },

        /*
        * 替换追加操作
        * */

        isReplace:function (str) {
            var value=this.val();
            var selectStr=this.iGetFieldSelectText();
            if (value==selectStr) return str;
            var start=this.iGetFieldPos();
            var end=this.iGetFieldEnd();
            if (!start.toString()) start=value.length;
            if (!end.toString()) end=value.length;
            return value.substring(0,start)+str+value.substring(end,value.length);
        },

        /*
         * 获取光标所在起始位置
         */
        iGetFieldPos: function () {
            var field = this.get(0);
            if (document.selection) {
                //IE
                $(this).focus();
                var sel = document.selection;
                var range = sel.createRange();
                var dupRange = range.duplicate();
                dupRange.moveToElementText(field);
                dupRange.setEndPoint('EndToEnd', range);
                field.selectionStart = dupRange.text.length - range.text.length;
                field.selectionEnd = field.selectionStart + range.text.length;
            }
            return field.selectionStart;
        },

        /*
        * 获取光标所在结束位置
        */
        iGetFieldEnd: function () {
            var field = this.get(0);
            if (document.selection) {
                //IE
                $(this).focus();
                var sel = document.selection;
                var range = sel.createRange();
                var dupRange = range.duplicate();
                dupRange.moveToElementText(field);
                dupRange.setEndPoint('EndToEnd', range);
                field.selectionStart = dupRange.text.length - range.text.length;
                field.selectionEnd = field.selectionStart + range.text.length;
            }
            return field.selectionEnd;
        },

        /*
        * 获取选中文本内容
        *
        * */

        iGetFieldSelectText:function () {
            if (!this.val()) return "";
            var start=this.iGetFieldPos();
            var end=this.iGetFieldEnd();
            if (!start.toString()) start=this.val().length;
            if (!end.toString()) end=this.val().length;
            return this.val().substring(start,end);
        },

        /*
         * 选中指定位置内字符 || 设置光标位置
         * --- 从start起选中(含第start个),到第end结束(不含第end个)
         * --- 若不输入end值,即为设置光标的位置(第start字符后)
         */
        iSelectField: function (start, end) {
            var field = this.get(0);
            //end未定义,则为设置光标位置
            if (arguments[1] == undefined) {
                end = start;
            }
            if (document.selection) {
                //IE
                var range = field.createTextRange();
                range.moveEnd('character', -$(this).val().length);
                range.moveEnd('character', end);
                range.moveStart('character', start);
                range.select();
            } else {
                //非IE
                field.setSelectionRange(start, end);
                $(this).focus();
            }
        },
        /*
         * 选中指定字符串
         */
        iSelectStr: function (str) {
            var field = this.get(0);
            var i = $(this).val().indexOf(str);
            i != -1 ? $(this).iSelectField(i, i + str.length) : false;
        },
        /*
         * 在光标之后插入字符串
         */
        iAddField: function (str,shuru_value) {
            var field = this.get(0);
            var v = $(this).val();
            var len = $(this).val().length;
            if (document.selection) {
                //IE
                $(this).focus()
                document.selection.createRange().text = str;
            } else {
                //非IE
                var selPos = field.selectionStart;
                $(this).val($(this).val().slice(0, field.selectionStart) + str + $(this).val().slice(field.selectionStart, len));

                this.iSelectField(selPos + shuru_value);

            };
        },
        /*
         * 删除光标前面(-)或者后面(+)的n个字符
         */
        iDelField: function (n) {
            var field = this.get(0);
            var pos = $(this).iGetFieldPos();
            var v = $(this).val();
            //大于0则删除后面,小于0则删除前面
            $(this).val(n > 0 ? v.slice(0, pos - n) + v.slice(pos) : v.slice(0, pos) + v.slice(pos - n));
            $(this).iSelectField(pos - (n < 0 ? 0 : n));
        }
    });

    /*
    * 罗马字符相关资料
  1、个位数举例
Ⅰ-1、Ⅱ-2、Ⅲ-3、Ⅳ-4、Ⅴ-5、Ⅵ-bai6、Ⅶ-7、Ⅷ-8、Ⅸ-9

2、十位数举例

Ⅹ-10、Ⅺ-11、Ⅻ-12、XIII-13、XIV-14、XV-15、XVI-16、XVII-17、XVIII-18、XIX-19、XX-20、XXI-21、XXII-22、XXIX-29、XXX-30、XXXIV-34、XXXV-35、XXXIX-39、XL-40、

L-50、LI-51、LV-55、LX-60、LXV-65、LXXX-80、XC-90、XCIII-93、XCV-95、XCVIII-98、XCIX-99

扩展资料: 

罗马数字采用七个罗马字母作数字、即Ⅰ(1)、X(10)、C(100)、M(1000)、V(5)、L(50)、D(500)。计数的方法:

相同的数字连写,所表示的数等于这些数字相加得到的数,如 Ⅲ=3;

小的数字在大的数字的右边,所表示的数等于这些数字相加得到的数,如 Ⅷ=8、Ⅻ=12;

小的数字(限于 Ⅰ、X 和 C)在大的数字的左边,所表示的数等于大数减小数得到的数,如 Ⅳ=4、Ⅸ=9;

加线乘千:在一个罗马数字的上方加上一条横线,表示将这个数字
乘以1000,即是原数的1000倍。同理,如果上方有两条横线,
即是原数的1000000倍。
    *
    * */

})(jQuery);

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页