onchange事件无法检测输入框复制粘贴，如何触发值变更检测？

问题说明 #

已实现Excel列复制粘贴到表格输入框的功能，但输入框的onchange事件无法识别JS批量赋值带来的内容变更，导致无法触发send函数同步数据到数据库。

原因 #

通过jQuery的.val()方法直接修改输入框值时，不会触发原生的change事件，而onchange仅在用户手动输入且输入框失去焦点时才会触发。

解决方案 #

有两种可行的处理方式：

方法1：手动触发change事件 #

在批量赋值的代码里，设置完输入框值后，主动调用.trigger('change')来触发事件。

修改粘贴处理的JS代码：

<!-- Copy Paste in input fields -->
<script type="text/javascript">
$('input').on('paste', function(e){
    var $this = $(this);
    $.each(e.originalEvent.clipboardData.items, function(i, v){
        if (v.type === 'text/plain'){
            v.getAsString(function(text){
                var x = $this.closest('td').index(),
                    y = $this.closest('tr').index()+1,
                    obj = {};
                text = text.trim('\r\n');
                $.each(text.split('\r\n'), function(i2, v2){
                    $.each(v2.split('\t'), function(i3, v3){
                        var row = y+i2, col = x+i3;
                        obj['cell-'+row+'-'+col] = v3;
                        // 赋值后手动触发change事件
                        $this.closest('table').find('tr:eq('+row+') td:eq('+col+') input').val(v3).trigger('change');
                    });
                });
            });
        }
    });
    return false;
});
</script>

方法2：改用input事件替代onchange #

input事件会在输入框值发生任何变化时立即触发，包括JS修改、粘贴、手动输入等场景。只需把输入框的onchange替换为oninput：

修改HTML中的输入框部分：

<td> <input oninput="send(this)" type="text" value="<?php echo $row['Name']; ?>">   </td>
<td><input oninput="send(this)" type="number" value="<?php echo $row['unit']; ?>" ></td>
<td><input  type="number" value="<?php echo $row['ID']; ?>" ></td>
<td><input oninput="send(this)" type="number" value="<?php echo $row['Margin']; ?>" ></td>

注意：input事件会在每一次值变化时触发（比如粘贴过程中），如果需要像change一样失去焦点才触发，优先选方法1。

完整修改后的代码示例 #

HTML表格部分 #

<table>
<thead>
<tr>
      <th>Name</th>
      <th>Unit</th>
      <th>ID</th>
      <th>Margin </th>
</tr>
</thead>
<tbody>
<?php
$query = " select  name,unit,Margin, id FROM Table1";
$stmt = $conn->query( $query );
$count=0;
while ( $row = $stmt->fetch( PDO::FETCH_ASSOC ) )
{ ?>
<tr>
<td> <input onchange="send(this)" type="text" value="<?php echo $row['Name']; ?>">   </td>
<td><input onchange="send(this)" type="number" value="<?php echo $row['unit']; ?>" ></td>
<td><input  type="number" value="<?php echo $row['ID']; ?>" ></td>
<td><input onchange="send(this)" type="number" value="<?php echo $row['Margin']; ?>" ></td>
</tr>
<?php } ?>
</tbody>
</table>

粘贴处理脚本（方法1修改版） #

<!-- Copy Paste in input fields -->
<script type="text/javascript">
$('input').on('paste', function(e){
    var $this = $(this);
    $.each(e.originalEvent.clipboardData.items, function(i, v){
        if (v.type === 'text/plain'){
            v.getAsString(function(text){
                var x = $this.closest('td').index(),
                    y = $this.closest('tr').index()+1,
                    obj = {};
                text = text.trim('\r\n');
                $.each(text.split('\r\n'), function(i2, v2){
                    $.each(v2.split('\t'), function(i3, v3){
                        var row = y+i2, col = x+i3;
                        obj['cell-'+row+'-'+col] = v3;
                        $this.closest('table').find('tr:eq('+row+') td:eq('+col+') input').val(v3).trigger('change');
                    });
                });
            });
        }
    });
    return false;
});
</script>

send函数脚本 #

<script>
function send(value){
    alert(value.value);
}
</script>

内容的提问来源于stack exchange，提问作者Mahmoud Hassan