如何在input框内实时加上某些文字？

Question

需求：在某个输入框中，当用户输入后，实时在光标后面加上某些文字

图中的(万元)是用placeholder做的，现在想要当用户输入某个数字，实时在数字后面添加"万元"这两个字，试过如下代码：

$('#amount').on('keyup', function(e) {
  if(e.keycode === num){
  $(this).val($(this).val()+'万元');
  }else{
  $(this).val('');
  }
});

但效果有点搞笑……关键是这么一弄光标就会跳到最后面去，用户体验很不好。

有什么好的解决方案吗？

Answer 1

我写过一个类似的react组件，react-format-number，但真心的，实现有点麻烦。强烈不推荐，最好商量下，把需求改成，“单位写在input后面，不要直接加在里面了”

Answer 2

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