javascript
梧桐深院
这个作者很懒,什么都没留下…
展开
-
html5 拖拽(上传)ctrl + v上传原理解析
实现元素拖拽的步骤1 把元素的draggable属性设置为true draggable=“true”2 拖放开始ondragstart触发dragstart事件3 当拖放到其它元素上ondragover会触发dragover事件4 放置元素时ondrop会触发drop事件拖拽过程中的其它事件:...原创 2021-05-19 13:59:19 · 511 阅读 · 0 评论 -
js 获取剪贴板文件和文本(解决js获取剪贴板文件总是为空)
// ctrl + v自然会触发paste事件,根本不用你自己去监听ctrl+v document.addEventListener('paste',function(event){ //ClipboardEvent // 获取文件 console.dir(event.clipboardData.files); // 获取文本 console.dir(event.clipboardData.getData('text')); });获取剪贴板文件时有两个坑:坑1: c...原创 2021-05-19 13:18:31 · 2233 阅读 · 1 评论 -
js检测ctrl+v
document.addEventListener('keydown',function(event){ //console.log(event); let keyStr = event.key; if((keyStr==='v'||keyStr==='V') && event.ctrlKey===true){ console.log('ctrl+v') }});扫码关注,获取更多好料原创 2021-05-18 10:24:36 · 751 阅读 · 2 评论 -
拖拽上传event.dataTransfer.files始终为空
这是一个bug,当我console.dir(event.dataTransfer);时,显示files的length为0,这让我一直以为没有获取到拖拽的文件,然而当我console.dir(event.dataTransfer.files);时,却显示我拖拽的文件信息。如下图:原创 2021-05-15 20:29:14 · 1358 阅读 · 2 评论 -
chrome控制台一句话实现页面checkbox全选
有时候做 一些重复性的工作,操作一些界面,需要全选checkbox,但是页面又没提供全选功能,此时一句话全选能帮我们节省很多时间document.querySelectorAll('input[type=checkbox]').forEach(function(item){ item.checked=true; console.log(item.checked)});在此记录,并不是因为这个功能很难,只是为了提醒我们,要时刻想着如何用工具提高效率。...原创 2021-05-14 10:43:33 · 1691 阅读 · 0 评论 -
html5 canvas 截图demo(带半透明遮罩)
效果图:代码地址:原创 2021-04-27 18:57:01 · 762 阅读 · 0 评论 -
getBoundingClientRect在页面发生滚动时值发生改变
这是由于getBoundingClientRect参考的是视窗的左上角,而不是文档的左上角,如果想要在页面发生滚动时还以文档的左上角为参考点,只需把滚动值加上即可。即 top+window.scrollYleft+window.scrollX参考文档:https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect...原创 2021-04-25 00:08:58 · 935 阅读 · 0 评论 -
chrome实现直接打印 js调用iframe打印局部内容 js新开窗口打印局部内容
chrome实现直接打印预览页自动点击打印准备工作: 电脑连接打印机,并设置一个默认打印机 --kiosk-printing (chrome启动加该参数,这是在预览页自动点击打印按钮的) 在chrome的快捷方式这里加上该参数,重启chromefunction dayin(){ var newWindow=window.open('','_blank','width=1,height=1,top=10000,left=10000'); var html = ".原创 2020-12-21 10:39:50 · 2190 阅读 · 0 评论 -
js 操作ntko控件实现编辑文档内容
搜索ntko office文档控件即可找到其官网介绍页面,如下链接:http://www.ntko.com/pro/show/mid/1_8/pid/2731找到产品演示,js示例演示,打开首次打开,会提示你没有安装控件,如下图:下载控件,安装即可体验。不过不体验也是可以的,在下载的控件里有一本编程指南,看指南就可以了。其基本原理也简单var ntco = document.getElementById(“ntco文档控件的id”)即可得到ntco文档控件对象。如果打开的是一个word原创 2021-03-16 12:51:46 · 819 阅读 · 1 评论 -
js设置cookie过期时间(expires)GMT格式时间
今天遇到需求,js设置cookie需要带expires属性,从chrome开发工具Application面板中看到cookie的expires属性格式如下:然而按照如图格式拼接成字符串2020-07-17T21:15:42.000Z设置expires属性,并不生效。后来从http响应头中看到如下格式:拼接为这种格式Fri, 17 Jul 2020 21:15:42 GMT设置后果断成功。设置单个cookie的完整语句为:document.cookie=a=1;expires=Fri, 17 J原创 2020-07-17 17:34:30 · 7799 阅读 · 0 评论 -
document.write script不生效用document.createElement替代
最近遇到一个document.write("<script type='text/javascript' src='test.js'></script>")在ie浏览器不生效的问题,可用document.createElement("script");解决 var s = document.createElement("script"); s.type = "text/javascript"; s.src = "test.js"; document.getElemen原创 2020-07-10 08:11:45 · 2139 阅读 · 2 评论 -
内联onclick阻止事件冒泡避坑指南
内联onclick事件虽然没有显式的传入event对象,但是在click事件中还是可以使用event对象的,不过这里有个细节需要注意,那就是event总是保存着最后发生的那个事件对象的信息。所以,在处理的时候,要把握好时机。例如:<span οnclick='clickSpan();'>点击span</span></div><script>...原创 2020-03-20 10:52:29 · 4803 阅读 · 1 评论