我在一个项目上遇到了一个非常奇怪的问题。长话短说,我有记录利率的输入字段,因此在模糊时附加%并在焦点时删除%。它在除 IE11 之外的所有浏览器上都能正常工作。由于某种原因,它将光标移动到输入的开头,这对于人们快速浏览并输入值来说很烦人。
这是一个简化的示例:
$('#test').val('default');
$('#test').focus(function() {
var value = $(this).val().slice(0, -1);
$(this).val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test" />
同样,这只发生在 IE11 中(在旧版本的 IE 中工作正常)。以前有人遇到过这个问题吗?我尝试在重新分配值后再次强制聚焦,但这并没有解决问题。任何提示表示赞赏。
您可以尝试在附加/删除时手动设置插入符位置%
标记,使用这两个函数(这些函数非常通用,如果您需要在其他时间为所有浏览器设置插入符位置,则应该适用于每个浏览器):
function getCaretPosition(element) {
var caretPos = 0;
if (element.type === 'text' || element.type === 'tel') {
if (document.selection) { // IE Support
element.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -element.value.length);
caretPos = Sel.text.length;
} else if (element.selectionStart || element.selectionStart === '0') {// Firefox support
caretPos = element.selectionStart;
}
}
return caretPos;
}
function setCaretPosition(element, position) {
if (element.type === 'text' || element.type === 'tel') {
if (element.setSelectionRange) {
element.focus();
element.setSelectionRange(position, position);
} else if (element.createTextRange) {
var range = element.createTextRange();
range.collapse(true);
range.moveEnd('character', position);
range.moveStart('character', position);
range.select();
}
}
}
并且仅在使用 IE11 时调用它们:) 另外,如果您愿意,您可以使这些函数更加具体,删除 FF 的部分:)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)