javascript - 有没有办法在 React Material 上触发 onPaste 事件在 Internet Explorer 中?
问题描述
我正在设计一个数据表,它需要提供能够粘贴从 excel 复制的数据行的功能。但是,onPaste 事件不会在 Internet Explorer 中触发。我能够实现这一点并在 chrome 中获取剪贴板数据。
<Table className={classes.table} aria-labelledby="tableTitle">
<EnhancedTableHead
numSelected={selected.length}
order={order}
orderBy={orderBy}
onSelectAllClick={this.handleSelectAllClick}
onRequestSort={this.handleRequestSort}
rowCount={data.length}
/>
<TableBody onPaste={event => this.handlePaste(ClipboardEvent)}>
{stableSort(data, getSorting(order, orderBy))
.map(n => {
const isSelected = this.isSelected(n.id);
return (
<TableRow
hover
onClick={event => this.handleClick(event, n.id)}
role="checkbox"
aria-checked={isSelected}
tabIndex={-1}
key={n.id}
selected={isSelected}
>
<TableCell padding="checkbox">
<Checkbox checked={isSelected} />
</TableCell>
<TableCell component="th" scope="row" padding="none">
{n.udf}
</TableCell>
<TableCell align="right">{n.ticker}</TableCell>
<TableCell align="right">{n.transType}</TableCell>
<TableCell align="right">{n.qty}</TableCell>
<TableCell align="right">{n.portfolio}</TableCell>
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow style={{ height: 49 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
解决方案
如果您检查文档,您会发现支持粘贴事件并且 OnPaste 事件的兼容性未知。
我对 OnPaste 事件进行了测试,发现该事件在 Internet Explorer 中有效。
问题是 Internet Explorer 不支持剪贴板数据。
因此,您将无法使用它访问数据。
测试代码:
<!DOCTYPE html>
<html>
<body>
<input type="text" onpaste="myFunction()" value="Try to paste something in here" size="40">
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "You pasted text!";
}
</script>
</body>
</html>
Internet Explorer 11 中的输出:
参考:
(2)元素:粘贴事件
作为替代方案,您可以尝试参考下面链接中的示例可能会帮助您解决问题。
推荐阅读
- javascript - JQuery - 如果没有其他按钮具有保证其外观的类,则隐藏按钮
- c - 如何在 BST 中输入更多信息并使用条目号作为访问它的键?
- python-2.7 - 删除 opencv 4.2 ubuntu 16.04
- javascript - 如何获取特定 Javascript 属性的名称?
- goland - 如何禁用 GoLand“自动导入 logrus”功能?
- sql - 仅查找 listagg 中的重复值
- c# - 如何从实体框架中的自引用模型中选择特定列?
- java - 将 Jena 配置为不报告已知问题
- json - Flutter HTTP GET请求不使用body作为参数
- angular - 在 Angular 的 HttpClient 中进行观察的正确方法(按书)