Question

我有一个jQuery代码，它应该在动态添加的输入字段中用键盘点/句点（键盘点）替换小数点（Numpad点）。当我逐个添加输入字段和值时，它运行良好。例如，添加一个输入字段，输入一个值，然后用户更改光标位置（箭头，单击），并键入小数点。

问题

然而，代码开始在值字符串的最末端输入多个点，每当我创建多个输入字段时，使用值填充它们（手动），然后尝试在每个字段中添加点/小数点。 / p>

我猜这是因为我委托的方式，但我不确定这是否真的是原因，如果是，如何更改它所以它总是添加与用户类型一样多的点（通常是一个，在光标处）。

如果代表团不是问题，我该如何处理，我应该改变什么？使用字符串替换（）不是一种选择。

我尝试过的事情

用change替换focus，但它仍然表现相同方式
将$('input').keydown(function(e)替换为$(this).keydown(function(e)，这稍微好一点（最后点数较少），但最后仍会在最后创建一个额外的点

下面的代码片段会抛出一个错误（隐藏一些结果），但我不确定错误是什么。要获得更好的显示效果，请参阅原始jsFiddle。

$('div').on('click', '#remove', removeMe());
$('body').on('change', 'input', function(e) {
    $('input').keydown(function(e) {
        var keyChar = e.keyCode;
        if(keyChar==110) {  // if it's a decimal point
            e.preventDefault();
            var place = $(this)[0].selectionStart; // cursor position
            var newVal = $(this).val().toString().split(""); // converting input to string, then to array
            newVal.splice(place,0,"."); // inserting ".", instead of decimal point 
            newVal = newVal.join(""); // converting it back to a string
            $(this).val(newVal); // setting it as the value - stays a string
        }
        /* keyCode info */
        $('p').append(keyChar+" ");
        /* */
    });
});

$('#add').click(function() {
    var parent = $(this).parent();
    var newInput = $('<input type="text" class="test">');
    parent.append(newInput);
});

function removeMe() {
  $('#remove').on('click', function() {
    var parentDiv = $(this).parent();
    parentDiv.children().remove('input:last-child');
    $('p').empty();
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  <button id="add">add</button>
  <button id="remove">remove</button>
  <p></p>
</div>

Answer 1

你可以这样做：Fiddle

$('body').on('keydown', 'input', function(e) {
  var keyChar = e.keyCode;
  if(keyChar==110) {
     e.preventDefault();

     var start = this.selectionStart;
     var end = this.selectionEnd;
     var val = $(this).val();
     var newVal = val.slice(0, start) + "." + val.slice(end);

     $(this).val(newVal);
  }
});

Answer 2

替换

var newVal = $(this).val().toString().split("");

与

var newVal = $(this).val().toString().split(".");

我应该如何更改我的代表团以防止多次触发？

2 个答案: