首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在没有contentEditable的`div`上添加键盘事件

在没有contentEditable属性的div上添加键盘事件可以通过以下步骤实现:

  1. 首先,为目标div元素添加一个tabindex属性,使其能够接收焦点。例如:<div tabindex="0"></div>
  2. 在JavaScript中,获取目标div元素,并为其添加键盘事件监听器。可以使用addEventListener方法来实现。例如:
代码语言:javascript
复制
const divElement = document.querySelector('div[tabindex="0"]');
divElement.addEventListener('keydown', function(event) {
  // 在这里编写处理键盘事件的代码
});
  1. 在键盘事件监听器中,可以根据event对象的keyCode或key属性来判断按下的是哪个键,并执行相应的操作。例如:
代码语言:javascript
复制
divElement.addEventListener('keydown', function(event) {
  if (event.keyCode === 13 || event.key === 'Enter') {
    // 按下了回车键
    // 执行相应的操作
  } else if (event.keyCode === 27 || event.key === 'Escape') {
    // 按下了Esc键
    // 执行相应的操作
  }
  // 可以根据需要添加其他键的判断
});
  1. 在处理键盘事件时,可以根据需求进行相应的操作,例如执行特定的函数、修改div内容等。

总结:

在没有contentEditable属性的div上添加键盘事件,可以通过为div元素添加tabindex属性,获取目标div元素并添加键盘事件监听器来实现。在监听器中,根据event对象的keyCode或key属性判断按下的是哪个键,并执行相应的操作。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

、可以做为编辑器使用,由于时间原因并没有深入体会、感兴趣小伙伴可以看一下以下内容 contenteditable-MDN contenteditable实现编辑器,光标、输入法处理 基于contenteditable...通过$event 可以获取键盘keyCode 达到监听目的 e.preventDefault 可以阻止我输入@字符默认事件 getSelection 可以获取光标的位置、给插入标签一个坐标。...要兼容中文输入法时候@事件判断(:中文输入法打“哈哈哈@” 这个时候不能监听@事件 ) 中文输入法时候单独输入@时 怎么判断中文输入?...// editor keydown触发事件 onKeyDownInput(e) { // @键盘时间判断 const isCode = ((e.keyCode === 229 && e.key...(spanNode); frag.appendChild(spanNodeFirst); // 如果是键盘触发默认删除面前@,前文中我们没有阻止@生成所以要删除@再插入ps:如果你是数组遍历请传入

2.6K20
  • 造一个 react-contenteditable 轮子

    那用 div 包裹呢?也不对:div 不能输入啊,唉,谁说不能输入contentEditable 属性就是可以让用户手动输入。...在这个 Issue 里说到因为没有对 onBlur 进行更新判断,因此,每次改变了值之后,再触发 blur 事件,值都不会改变。那加个 onBlur 检查是否可行呢?...补充 props 除了上面一些比较重要 props,还有一些增强扩展性 props, disabled, tagName。...checkUpdate,开发者用于优化渲染性能 向外暴露 ref,disabled,tagName props 虽然这个 react-contenteditable 看起来还不错,但是看了源码之后发现这个库很多兼容性问题都没有考虑到...,比如 这篇 Stackoverflow 讨论,再加上上面提到蛋疼 Issue,如果真要在生产环境实现富文本最好不要用这个库,推荐使用 draft.js。

    1.7K20

    HTML5 学习总结(二)——HTML5新增属性与表单元素

    menuitem 属性: label:菜单项显示名称 icon:在菜单项左侧显示图标 onclick:点击菜单项触发事件 1.2、contentEditable 规定是否可编辑元素内容 属性值...当一个元素contenteditable状态为true(contenteditable属性为空字符串,或为true,或为inherit且其父元素状态为true)时,意味着该元素是可编辑。...HTML5 Forms新增了许多新控件及其API,方便我们做更复杂应用,而不用借助其它前端脚本语言(:javascript),极大解放了我们双手。 ?...2.3、邮箱与URL输入 email输入类型外表与文本框一样,但在移动端运行时将切换对应输入键盘,约束格式 格式: ?...2.8、电话输入类型 此类型要求输入一个电话号码,但实际它并没有特殊验证,与text类型没什么区别. 在移动端会弹出输入数字键盘

    3.5K70

    【H5】209-可能这些是你想要H5软键盘兼容方案

    然而,H5 并没有直接监听软键盘原生事件,只能通过软键盘弹起或收起,引发页面其他方面的表现间接监听,曲线救国。并且,在 IOS 和 Android 表现不尽相同。...IOS 软键盘弹起表现 在 IOS ,输入框(input、textarea 或 富文本)获取焦点,键盘弹起,页面(webview)并没有被压缩,或者说高度(height)没有改变,只是页面(webview...听软键盘弹起和收起 综合上面键盘弹起和收起在 IOS 和 Android 不同表现,我们可以分开进行如下处理来监听软键盘弹起和收起: 在 IOS ,监听输入框 focus 事件来获知软键盘弹起...,监听输入框 blur 事件获知软键盘收起。...-- 省略几千行聊天内容 --> </div

    3.9K12

    【富文本】268- 富文本原理了解一下?

    contenteditable 属性 假如我们给一个标签加上 contenteditable="true" 属性,就像这样: 那么在这个... 这是不可编辑 该属性最早是在 IE 实现(厉害哦?)...button 标签,然后执行命令就会无效,是因为点击其他标签大多都会造成先失去焦点(或者不知不觉就突然失去焦点了),再执行点击事件,此时没有选区或光标所以会没有效果,这点要留意一下。...在四个顶点框上添加拖拽事件 这里我们会在四个顶点监听 mousedown 事件,按下鼠标时,首先会改变鼠标样式(就是鼠标会变成调整大小那种图标),然后监听 mousemove 和 mouseup 事件...结语 回到开头我们讲那个需求,关于图片旋转,根据上面的思路,你可以在蒙层加个旋转图标,并添加点击事件,然后修改图片和蒙层 transform 属性,当然了位置也要变,可能需要些计算,我也没试过,不知道效果咋样

    2K40

    可能这些是你想要H5软键盘兼容方案

    然而,H5 并没有直接监听软键盘原生事件,只能通过软键盘弹起或收起,引发页面其他方面的表现间接监听,曲线救国。并且,在 IOS 和 Android 表现不尽相同。...IOS 软键盘弹起表现 在 IOS ,输入框(input、textarea 或 富文本)获取焦点,键盘弹起,页面(webview)并没有被压缩,或者说高度(height)没有改变,只是页面(webview...监听软键盘弹起和收起 综合上面键盘弹起和收起在 IOS 和 Android 不同表现,我们可以分开进行如下处理来监听软键盘弹起和收起: 在 IOS ,监听输入框 focus 事件来获知软键盘弹起...,监听输入框 blur 事件获知软键盘收起。...-- 省略几千行聊天内容 --> </div

    8.1K20

    send_keys报错element not interactable

    .innerText=arguments[1];' driver.execute_script(js, log_search_span, search_text) 第二个方法,添加属性contenteditable...[2]/div/div[6]/div[1]/div/div/div/div[5]/div/pre') js = 'arguments[0].setAttribute("contenteditable",...经过分析,得出以下线索: 设置元素值是已经生成后dom 程序真正dom隐藏在js/后端中 span是由js或后端动态生成 要想模拟出来,需要分析js实现代码 控制台js代码是加密混淆过 selenium...send_keys已经是模拟键盘输入了,不知道为啥没有触发相关代码,存值到dom 网上很多方案是标签,比较好解决,阿里这个span还真有点不简单。...chrome console调试js 最后分享一下chrome console调试js方法。 F12后,在元素右键,选择Copy selector,复制selector ?

    2.5K10

    161. 精读《可视化搭建思考 - 富文本搭建》

    回到富文本搭建,其实富文本搭建和普通网页构建并没有本质区别。...积木式搭建和富文本搭建区别 富文本以文本为中心,因此编辑文字光标会常驻,编辑核心逻辑是排版文字,并考虑如何在文字周围添加一些自定义区块。...可以看出来这是一种结合尝试,从前端角度来看,富文本本质是对一个 div 进行 contenteditable 申明,那么一个应用可以整体是 contenteditable ,也可以局部几个区块是,.../div> 只要拖拽 bar-chart、div 两个组件即可,div 内部文字通过光标输入,line-chart 通过富文本某个按钮或者键盘快捷键添加。...可以看到虽然操作方式不同,但本质描述协议并没有本质区别,我们理论可以将任何容器标签切换为富文本模式。

    1.1K10

    【Web技术】421- 富文本原理介绍

    contenteditable 属性 假如我们给一个标签加上 contenteditable="true" 属性,就像这样: 那么在这个... 这是不可编辑 该属性最早是在 IE 实现(厉害哦?)...有的同学可能用不是 button 标签,然后执行命令就会无效,是因为点击其他标签大多都会造成先失去焦点(或者不知不觉就突然失去焦点了),再执行点击事件,此时没有选区或光标所以会没有效果,这点要留意一下...在四个顶点框上添加拖拽事件 这里我们会在四个顶点监听 mousedown 事件,按下鼠标时,首先会改变鼠标样式(就是鼠标会变成调整大小那种图标),然后监听 mousemove 和 mouseup 事件...结语 回到开头我们讲那个需求,关于图片旋转,根据上面的思路,你可以在蒙层加个旋转图标,并添加点击事件,然后修改图片和蒙层 transform 属性,当然了位置也要变,可能需要些计算,我也没试过,不知道效果咋样

    1K20

    前端如何防止数据被异常篡改并且复原数据

    我们来构建一个在线文档最小化场景: 这是 Web 云文档一段内容,如果直接编辑,可以编辑成功。...#999; } 这里,我们利用 HTML contenteditable 属性,实现了一个可编辑 DIV 框: 接下来,我们就可以利用 MutationObserver,实现对这个 DOM 元素监听...而 addedNodes 和 removeDNodes 都为空,说明没有结构变化。 两组数据唯一变化在于 realtimeText 我们利用了这个值记录了可编辑 DOM 元素内文本值内容。...,多存储一份当前获焦元素信息,对比内容被修改时页面获焦元素是否是当前输入框 尝试判断输入框获焦状态,可以通过监听 foucs、blur 获焦及失焦等事件进行判断 用户当文本内容改变时,是否有经过触发过键盘事件...,譬如 keydown 事件 用户当文本内容改变时,是否有经过触发过键盘事件粘贴 paste 事件 对于直接修改控制台,则可能是除了文本内容外,有 DOM 子树其他变化,也就是会触发 Mutation

    32640

    前言

    当我们在输入法编辑器敲击键盘时会按顺序执行如下事件: compositionstart -> (compositionupdate -> input)+ -> compositionend -> 当失焦时触发...// 最终填写到元素内容,compositionstart为空,compositionend事件中能获取"你好"内容 readonly locale: DOMString 编码方式触发事件 DOM...Level2事件中包含HTMLEvents, MouseEvents、MutationEvents和UIEvents,而DOM Level3则增加CustomEvent等事件类型。.../** * 选项属性 * @param {string} name - 事件名称, click,input等 * @param {boolean} [cancelable=false] -...,但当事件绑定修饰符设置为lazy后并没有绑定input事件回调函数,此时在输入法编辑器操作完毕后并不会自动更新状态,我们又有机会可以贡献代码了:) // change事件是元素失焦后前后值不同时触发,

    81030

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

    当我们在输入法编辑器敲击键盘时会按顺序执行如下事件: compositionstart -> (compositionupdate -> input)+ -> compositionend -> 当失焦时触发...// 最终填写到元素内容,compositionstart为空,compositionend事件中能获取"你好"内容 readonly locale: DOMString 复制代码 编码方式触发事件...DOM Level2事件中包含HTMLEvents, MouseEvents、MutationEvents和UIEvents,而DOM Level3则增加CustomEvent等事件类型。...选项属性 * @param {string} name - 事件名称, click,input等 * @param {boolean} [cancelable=false] - 指定事件是否可冒泡...,但当事件绑定修饰符设置为lazy后并没有绑定input事件回调函数,此时在输入法编辑器操作完毕后并不会自动更新状态,我们又有机会可以贡献代码了:) // change事件是元素失焦后前后值不同时触发,

    83330

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

    我们只是还没办法连接它们 - 没有事件监听用户输入,也没有处理程序来处理此类事件输出。 控制台仍然作为临时控制器存在,你可以通过它添加和删除待办事项。 ?...我们必须将事件监听器放在视图DOM元素。我们将响应表单submit事件,然后单击click并更改change待办事项列表事件。(由于略为复杂,我这里略过"编辑")。...响应模型中回调 我们遗漏了一些东西 - 事件正在监听,处理程序被调用,但是什么也没有发生。这是因为模型不知道视图应该更新,也不知道如何进行视图更新。...在模型,为onTodoListChanged添加bindTodoListChanged方法。...输入事件是当你键入contenteditable元素时触发事件,而foucesout在你离开contenteditable元素时候触发事件

    2K10

    Notion 编辑器原理分析

    contenteditable 又有很多原生能力,速度快且支持所有的浏览器、光标与选区、输入法事件等;ipad 下 contenteditable 也提供较多有意思能力,如左右分栏时可直接从其它应用拖动文字到...,renderSelectionHalo 渲染选区背景,renderDraggable 设置拖拽行为,也定义了一堆事情, mouse 、click 事件,来响应 block 通用事件。...上面为各种 block 内容 react 渲染组件,负责组件具体渲染与行为, block type 为 text 则渲染成 contenteditable div。...执行一次 op 过程分成几步: 创建 Transation t 对象 把 op 添加到 t.operations 数组中 算出当前 op 反操作,添加到 t.invertedOperations 数组中...contenteditablecontenteditable 负责文字呈现与用户事件接收,接收到事件后再自己处理,文字加粗、文字录入、文字颜色等,并最终生成 notion op 来修改 block

    2.6K30
    领券