需求:在某个输入框中,当用户输入后,实时在光标后面加上某些文字
图中的(万元)是用placeholder
做的,现在想要当用户输入某个数字,实时在数字后面添加"万元"这两个字,试过如下代码:
$('#amount').on('keyup', function(e) {
if(e.keycode === num){
$(this).val($(this).val()+'万元');
}else{
$(this).val('');
}
});
但效果有点搞笑……关键是这么一弄光标就会跳到最后面去,用户体验很不好。
有什么好的解决方案吗?
1、focus在空input上,添加“万元”,并将光标移至最前面;
2、focus在非空input上,若存在“万元”单位,则将光标移至单位前;否则添加“万元”单位
3、操作只在每次focus时发生,输入内容时没有额外开销
在线的例子
$('#money').on('focus', function() {
var val = $(this).val(),
len = val.length;
if (val.indexOf('万元') !== -1) {
changeCursorPos('money', len - 2);
} else {
$(this).val(val + '万元');
changeCursorPos('money', len);
}
})
function changeCursorPos(inputId, pos) {// 更改光标位置
var inpObj = document.getElementById(inputId);
if (window.getSelection) {
inpObj.setSelectionRange(pos, pos);
} else {
var range = document.selection.createRange();
var textRange = inpObj.createTextRange();
textRange.moveStart('character', pos);
textRange.collapse();
textRange.select();
}
}
我写过一个类似的react
组件,react-format-number,但真心的,实现有点麻烦。强烈不推荐,最好商量下,把需求改成,“单位写在input
后面,不要直接加在里面了”