文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

那些你可能不知道的浏览器奇技淫巧

ps: 以下技巧均在 Chrome 浏览器下测试的。 网页长截图 按 F12 弹出控制台，按 ctrl+shift+p 弹出输入框 ?...输入full，选择 capture full size screenshot 然后点击就会对当前网页进图并生成下载一个图片。...浏览器秒变编辑器 浏览器地址栏中输入 data:text/html, contenteditable>回车直接变编辑器，这里可以直接输入字符进行编辑了。 ?...编辑网页 打开网站，地址栏输入javascript:void(document.body.contentEditable='true');当然也可以直接在控制台输入 document.body.contentEditable...=true或document.designMode = "on"然后就可以随心所欲的改变网页内容了，所以一些网页截图不可信，比如之前有人借用王思聪名义用微博发支付宝的红包，可谓套路满满。

1.2K10

Chrome浏览器6个操作让你秒变技术大牛

ps: 以下技巧均在Chrome 浏览器下测试的。 1. 网页长截图 按 F12 弹出控制台，按 ctrl+shift+p 弹出输入框 ?...输入full，选择 capture full size screenshot 然后点击就会对当前网页进图并生成下载一个图片。...浏览器秒变编辑器 浏览器地址栏中输入 data:text/html, contenteditable>回车直接变编辑器，这里可以直接输入字符进行编辑了。 ? 3....编辑网页 打开网站，地址栏输入javascript:void(document.body.contentEditable='true');当然也可以直接在控制台输入 document.body.contentEditable...=true或document.designMode = "on"然后就可以随心所欲的改变网页内容了，所以一些网页截图不可信，比如之前有人借用王思聪名义用微博发支付宝的红包，可谓套路满满。

74520
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【Java 进阶篇】深入浅出：JQuery 事件绑定的奇妙世界

    用户的点击、输入、滚动等行为都触发着各种事件，而如何在代码中捕捉并处理这些事件是每位前端开发者必须掌握的技能之一。本文将带你深入浅出，探索 JQuery 中的事件绑定，为你揭开这个奇妙世界的面纱。...键盘事件：keydown（按键按下）、keyup（按键释放）、keypress（按键被按下并松开）等。...在某些情况下，我们希望阻止事件冒泡，以防止事件触发到不想被触发的元素上。 在 JQuery 中，可以使用 stopPropagation 方法来阻止事件冒泡。...当按钮被点击时，会触发按钮的点击事件，同时会触发内层元素和外层元素的点击事件。...通过 JQuery 事件绑定，我们可以方便地在用户输入时进行实时验证，提升用户体验。 <!

    1.3K10

    用纯 JavaScript 撸一个 MVC 框架

    它需要用户输入，例如单击或键入，并处理用户交互的回调。 模型永远不会触及视图。视图永远不会触及模型。控制器用来连接它们。 我想提一下，为一个简单的 todo 程序做 MVC 实际上是一大堆样板。...当你提交新的待办事项、单击删除按钮或单击待办事项的复选框时，将触发一个事件。视图必须侦听这些事件，因为它们是视图的用户输入，它会将响应事件所要做的工作分配给控制器。 我们将为事件创建 handler。...首先，提交一个 handleAddTodo 事件，当我们创建的待办事项输入表单被提交时，可以通过按 Enter 键或单击“提交”按钮来触发。这是一个 submit 事件。...// 控制器 this.view.bindEvents(this) 现在，当指定的元素发生submit、click 或 change 事件时，将会调用相应的 handler。...当你在 contenteditable 元素输入时，input 事件会被触发，离开contenteditable元素时，focusout 会触发。

    4.6K41

    BVS智能视频应用分析

    烟火识别检测：对货物存储区域进行烟雾、火检测，当发现有烟火或者火时立即触发告警，让火情第一时间得到控制。...车辆逆行：对高速公路上不按要求运行的车辆、行人进行实时监控，及时反馈到监控视频上，让管理人员及时解决。...校园财产：对校园财务室、实验室、档案试卷保管室等校园重点区域，在非工作时间进开启入侵报警检测。有人员进入时立即触发报警，通知安保人员，立即做出应对措施，从而保障校园内财务安全。...校园危险区域：对于学校禁区及危险区域部署摄像机，如池塘、天台、变电室等危险区域，为避免教职人员及学生等进入，可启用危险区看防功能，当有人进入时立即触发报警，通知校园安保人员，立即做出应对措施。...当区域内人群密度达到系统预定值后，系统会立即触发报警，立即触发报警，通知管理人员做出应对措施。

    2.5K10

    造一个 react-contenteditable 轮子

    也不对：div 不能输入啊，唉，谁说不能输入的？contentEditable 属性就是可以让用户手动输入的。 下面就带大家手写一个 react-contenteditable 的轮子吧。...style={{ height: 300 }} value={value} onChange={onChange} /> ); } 重新再认识一下 contentEditable...这是因为每次 setValue 的时候组件会重新渲染，每次渲染的时候光标会跑到最前面，所以当 setValue 的时候会出现倒序输出的问题。...checkUpdate 有人可能会有疑问：一般使用 input 之类输入组件的时候，如果没在 onChange 里 setValue，值都是不会改变的呀。...在这个 Issue 里说到因为没有对 onBlur 进行更新判断，因此，每次改变了值之后，再触发 blur 事件，值都不会改变。那加个 onBlur 的检查是否可行呢？

    2.1K20

    petite-vue源码剖析-双向绑定`v-model`的工作原理

    compositionstart是开始在输入法编辑器上输入字符触发，而compositionend则是在输入法编辑器上输入字符结束时触发，另外还有一个compositionupdate是在输入法编辑器上输入字符过程中触发...当我们在输入法编辑器敲击键盘时会按顺序执行如下事件： compositionstart -> (compositionupdate -> input)+ -> compositionend -> 当失焦时触发...change 当在输入法编辑器上输入ri后按空格确认日字符，则触发如下事件 compositionstart(data="") -> compositionupdate(data="r") -> input...Ctrl键 altKey: boolean, // 是否按下Ctrl键 shiftKey: boolean, // 是否按下Ctrl键 metaKey: boolean, // 是否按下Ctrl...键 button: number, // 按下按个鼠标键，默认为0.0左，1中，2右 relatedTarget: HTMLElement // 指向于事件相关的元素，一般只有在模拟mouseover

    1.1K30

    前言

    compositionstart是开始在输入法编辑器上输入字符触发，而compositionend则是在输入法编辑器上输入字符结束时触发，另外还有一个compositionupdate是在输入法编辑器上输入字符过程中触发...当我们在输入法编辑器敲击键盘时会按顺序执行如下事件： compositionstart -> (compositionupdate -> input)+ -> compositionend -> 当失焦时触发...change 当在输入法编辑器上输入ri后按空格确认日字符，则触发如下事件 compositionstart(data="") -> compositionupdate(data="r") -> input...Ctrl键 altKey: boolean, // 是否按下Ctrl键 shiftKey: boolean, // 是否按下Ctrl键 metaKey: boolean, // 是否按下Ctrl...键 button: number, // 按下按个鼠标键，默认为0.0左，1中，2右 relatedTarget: HTMLElement // 指向于事件相关的元素，一般只有在模拟mouseover

    1.1K30

    【实战】我是如何在输入框实现@ At功能的

    、可以做为编辑器使用，由于时间原因并没有深入体会、感兴趣的小伙伴可以看一下以下内容 contenteditable-MDN contenteditable实现编辑器,光标、输入法处理 基于contenteditable...当用户使用中文输入法开始输入中文时，compositionstart事件就会被触发。当文中文输入完成或取消时, compositionend 事件将被触发。...利用这个机制我们就可以判断是否中文状态了 positionstart 事件,当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。...compositionend 事件, 当文中文输入完成时, compositionend 事件将被触发。...我就就可以做到：随时@ 随时插入的功能拉～ 五、Android、IOS、Web显示多端一致 每个端使用富文本都是不一样的、那我们应该如何做到统一数据统一呢？

    3.7K20

    【前端词典】分享 8 个有趣且实用的 API

    使用： 你可以在地址栏输入 data:text/html,contenteditable>, 这样浏览器就变成了编辑器。 ? 使用场景： 需求 —— 页面需要一个文本输入框。...该文本输入框默认状态下有默认文本提示信息 文本框输入状态下其高度会随文本内容自动撑开 像这样的需求我们就可以使用 代替 输入内容后改变 class： contentEditable='true' placeholder='请输入'> // css...浏览其他窗口、浏览器最小化、点击其他程序等， window.onblur 事件就会触发; 回到该窗口， window.onfocus 事件就会触发。 使用： ? 上面的截图是微信网页版的消息提示。...当进入/退出全屏模式时,会触发 fullscreenchange 事件。你可以在监听这个事件，做你想做的事。

    96330

    【译】用纯JavaScript写一个简单的MVC App

    当你提交新的待办事项，单击删除按钮或单击待办事项的复选框时，将触发一个事件。视图必须监听那些事件，因为它是视图中用户的输入，但是它将把响应该事件将要发生的事情责任派发到控制器。...(this.handleToggleTodo) // this.view.bindEditTodo(this.handleEditTodo) - We'll do this one last 现在，当一个...这是因为模型不知道视图应该更新，也不知道如何进行视图的更新。我们在视图上有displayTodos方法来解决此问题，但是如前所述，模型和视图不互通。...我想简化它，不需要编辑按钮，用输入框input或其他来代替span。我们也不想每次输入时都调用editTodo，因为它将渲染整个待办事项列表UI。...输入事件是当你键入contenteditable元素时触发事件，而foucesout在你离开contenteditable元素时候触发的事件。

    2.7K10

    一文带你了解富文本是如何协同工作的

    前言 这里我们先说一下，现在市面上有的富文本。...那么，连接信息，自然用到了协同，而且协同有一个最大的问题——如何合并？ 如何解决协同中的合并问题 首先要了解文档协同中几个概念，协同 、合并 、冲突 。...答案是按照用户加入时的id进行排序。 那他具体如何自动的解决冲突呢？...这时候，可能有人要说，这不对了。这样岂不是，一个人的数据永远会被另一个覆盖~~ 先别担心，因为实际使用中，双方是持续不断输入的，绝大多数情况下，不会在同一次合并中，同时修改一个值。...当然，如果真的触发了，则会覆盖。至于，做到不覆盖又体验良好，那恐怕只能人工了，像git一样。有时候，结合实际的妥协也是一种方案。

    1.3K30

    Flask 框架：运用SocketIO实现WebSSH

    首先我们先来看一下SocketIO库是如何进行通信的，对于前端部分需要引入socket.io这个框架，然后就是利用该框架内提供的各类函数实现创建WS通道，如下代码： 代码中通过调用io.connect来连接后端...message 出现消息后,率先执行此处 connect 当websocket连接成功时,自动触发connect默认方法 disconnect 当websocket连接失败时,自动触发disconnect...") # 当websocket连接失败时,自动触发disconnect默认方法 @socketio.on("disconnect",namespace="/Socket") def disconnect...原理明白了以后，再去实现一个WebSSH终端就会变得很容易，WebSSH终端我们需要xterm这个前端库来实现，其原理就是当后台有数据输出或前台有输入时第一时间传递给SSH模块执行然后返回结果，我们先来看前端部分是如何实现这段功能的...") # 当websocket连接失败时,自动触发disconnect默认方法 @socketio.on("disconnect",namespace="/Socket") def disconnect

    2.3K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券