浏览器中可用的光标类型

cursor光标类型
autodefaultnonecontext-menuhelppointerprogress
waitcellcrosshairtextvertical-textaliascopy
moveno-dropnot-allowede-resizen-resizene-resizenw-resize
s-resizese-resizesw-resizew-resizeew-resizens-resizenesw-resize
nwse-resizecol-resizerow-resizeall-scrollurlzoom-inzoom-out
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在`<div>`根据光标位置插入上传图片,需要使用`Range`对象和`insertNode()`方法来将图片插入到光标所在位置。以下是一个示例代码: ```html <div contenteditable="true" onkeydown="handleKeyDown(event)"> 在这里输入文字或插入图片 </div> <script> function handleKeyDown(event) { // 如果用户按下了Ctrl+V,表示要粘贴内容 if (event.ctrlKey && event.keyCode == 86) { // 阻止浏览器默认的粘贴操作 event.preventDefault(); // 获取粘贴板的文件 var items = (event.clipboardData || event.originalEvent.clipboardData).items; for (var i = 0; i < items.length; i++) { var item = items[i]; // 如果是文件类型,表示用户正在上传图片 if (item.kind == 'file') { var file = item.getAsFile(); // 读取文件数据并将其插入到光标位置 var reader = new FileReader(); reader.onload = function(event) { var img = document.createElement('img'); img.src = event.target.result; insertNodeAtCursor(img); }; reader.readAsDataURL(file); } } } } function insertNodeAtCursor(node) { var range, html; if (window.getSelection && window.getSelection().getRangeAt) { range = window.getSelection().getRangeAt(0); range.insertNode(node); } else if (document.selection && document.selection.createRange) { range = document.selection.createRange(); range.pasteHTML(html); } } </script> ``` 在上面的代码,我们使用`onkeydown`事件来监听用户的按键操作。如果用户按下了Ctrl+V,表示要粘贴内容,我们就会阻止浏览器默认的粘贴操作,并获取粘贴板的文件数据。然后,我们使用`FileReader`对象来读取文件数据,并将其插入到光标位置。最后,我们使用`Range`对象的`insertNode()`方法来将图片节点插入到光标所在位置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值