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

Question

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

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

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

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

有什么好的解决方案吗？

Answer 1

可能来晚了，但是我有个思路，在input后面再加个标签，让他看起来还是input，其实是input加另一个标签，然后根据输入去改第二个标签的margin-left

Answer 2

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