Chrome 输入法 检测-输入转大写

  • compositionstart:在输入中文或者语音等需要等待一连串的输入的操作之前,compositionstart 事件会触发。
  • compositionend:在输入中文或者语音等完毕或取消时,compositionend 事件会触发。

结合 Keydown +compositionstart+compositionend 解决输入法问题,输入法下,不对结果做任何处理。

输入法下,输入过快 keyup 依然会获取到 keycode 不为 229 的代码,且 keyup 不能 取消输入,只能 选择 keydown


//input 输入小写转大写
function inputKeydown2UpperCase(obj, parentObj) {
    if (!(typeof (parentObj) === "string")) {
        parentObj = "";
    }
    if (typeof (obj) === "string") {
        if(!ObjectIsEmpty(obj))
        {
            if (obj.substr(0, 1) != "#")
                obj = "#" + obj;
        }
    }
    $(obj, parentObj).bind('compositionstart.Michael', function (event) {
        console.log('compositionstart', event);
        $(this).data('ime', true);
    });
    $(obj, parentObj).bind('compositionend.Michael', function (event) {
        console.log('compositionend', event);
        $(this).data('ime', null);
    });
    $(obj, parentObj).bind('blur.Michael', function () { $(this).data('ime', null); });
    $(obj, parentObj).bind('keydown.Michael', function (event) {
        if (!event) {
            event = window.event;
        }
        var keyCode = (event.keyCode || event.which);
        var ime = $(this).data('ime');
        if (keyCode != 229 && keyCode >= 48 && keyCode <= 90) {
            if (ObjectIsEmpty(ime)) {
                var cursor_pos = getInputSelection(this);//光标区间位置
                //console.log(cursor_pos);
                var realkey = String.fromCharCode(keyCode);
                var isShift = event.shiftKey || (keyCode == 16) || false; // shift键是否按住
                if (isShift) {
                    if (!ObjectIsEmpty(cursor_pos)) {
                        this.value = this.value.substr(0, cursor_pos.start) + realkey.toLowerCase() + this.value.substr(cursor_pos.end);
                        setCaretPosition(this, cursor_pos.end + 1);
                    } else {
                        this.value += realkey.toLowerCase();
                    }
                }
                else {
                    if (!ObjectIsEmpty(cursor_pos)) {
                        this.value = this.value.substr(0, cursor_pos.start) + realkey.toUpperCase() + this.value.substr(cursor_pos.end);
                        setCaretPosition(this, cursor_pos.end + 1);
                    } else {
                        this.value += realkey.toUpperCase();
                    }
                }
            }
            event.returnValue = false;
            return false;
        }
    });
}

 


//获取光标位置函数
function getCursortPosition(ctrl) {
    var CaretPos = 0;    // IE Support
    if (document.selection) {
        ctrl.focus();
        var Sel = document.selection.createRange();
        Sel.moveStart('character', -ctrl.value.length);
        CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0')
        CaretPos = ctrl.selectionStart;
    return (CaretPos);
}
//设置光标位置函数
function setCaretPosition(ctrl, pos) {
    if (ctrl.setSelectionRange) {
        ctrl.focus();
        ctrl.setSelectionRange(pos, pos);
    }
    else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}
//获取控件选中值
function getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range, textInputRange, len, endRange;
    //判断是否可直接取出选择索引
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();
        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");
            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());
            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }
    //返回
    return {
        start: start,
        end: end
    };
}

参考:https://segmentfault.com/a/1190000012490380

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值