- 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
};
}