基于键盘光标的特殊交互元素编辑方法、装置和存储介质制造方法及图纸

技术编号:19488941 阅读:29 留言:0更新日期:2018-11-17 11:59
本发明专利技术涉及一种基于键盘光标的特殊交互元素编辑方法、装置和存储介质,属于互联网技术领域。所述方法包括以下步骤:监听用户的按键触发事件;读取用户当前的光标选区;根据读取的光标选区位置和用户的按键触发情况,对特殊交互元素执行相应的操作,并在操作完成后退出监听;所述介质上存储有计算机程序,该计算机程序被处理器执行时,实现上述的基于键盘光标的特殊交互元素编辑方法;所述页面编辑装置,包括处理器和存储器,存储器上存储有计算机程序,该计算机程序被处理器执行时,实现上述的基于键盘光标的特殊交互元素编辑方法。与现有技术相比,本发明专利技术具有编辑性能好、操作统一性强以及操作准确性高等优点。

【技术实现步骤摘要】
基于键盘光标的特殊交互元素编辑方法、装置和存储介质
本专利技术涉及互联网
,特别涉及web前端领域,具体是指一种基于键盘光标的特殊交互元素编辑方法、装置和存储介质。
技术介绍
在目前现有的web端富文本编辑器中,前端实现部分绝大多数是基于HTML元素中的contenteditable属性展开的。在特定的应用场景中,如对于要求编辑器内若干元素必须独占一行且居中的情况下,光标和元素上下文的交互有着天然的缺陷。当元素需要独占一行且居中,元素或其父容器须设置为块级元素,当输入光标遇到此类元素时,退格键无法直接删除该元素,同时会导致页面文档被无意义的空白字符填充。当需要在元素上下文加入其他元素以便形成固定排版时,为保证元素排版稳定,需要在元素中加入不可被编辑的属性,输入光标在遇到此类元素时,行为不可预测,无法准确定位相应元素或上下文。根据在不同的浏览器下的不一致表现,光标可能会消失,或定位到元素上方,或定位到元素侧边,在此时输入或删除内容也变得不可控。如何让使用者在编辑过程中在遇到上述块级元素以及不可编辑元素等特殊交互元素时,避免出现上述意料外的情况,同时尽可能的去鼠标化,实现纯键盘的全文交互,是目前亟待解决的问题。
技术实现思路
本专利技术的目的是针对上述问题提供一种基于键盘光标的特殊交互元素编辑方法、装置和存储介质。本专利技术的目的可以通过以下技术方案来实现:一种基于键盘光标的特殊交互元素编辑方法,所述的方法包括以下步骤:(1)监听用户的按键触发事件;(2)读取用户当前的光标选区;(3)根据步骤(2)读取的光标选区位置和用户的按键触发情况,对特殊交互元素执行相应的操作,并在操作完成后退出监听。优选地,所述特殊交互元素包括块级元素和不可编辑元素。优选地,所述步骤(3)具体包括以下步骤:(31)根据步骤(2)读取的光标选区位置确定特殊交互元素是否处于选定状态,若是则进入步骤(32),若否则进入步骤(33);(32)根据用户的按键触发情况对特殊交互元素执行相应的操作,并进入步骤(34);(33)根据用户的按键触发情况和当前的光标选区位置,判断是否选定特殊交互元素,若是则阻止默认事件并选定特殊交互元素,返回步骤(31),若否则进入步骤(34);(34)触发默认事件并退出监听。优选地,所述步骤(32)具体包括以下步骤:(321)判断用户触发的按键是否为退格键,若是则进入步骤(322),若否则进入步骤(323);(322)删除特殊交互元素,并进入步骤(34);(323)消除特殊交互元素的选定状态,并进入步骤(34)。优选地,所述步骤(33)具体包括以下步骤:(331)判断用户触发的按键是否为上方向键或下方向键,若是则进入步骤(333),若否则进入步骤(332);(332)根据当前的光标选区位置和特殊交互元素相邻兄弟节点的一级子孙节点之间的位置关系,以及光标的偏移量,判断是否选定特殊交互元素并进入步骤(334);(333)根据当前的光标选区位置和特殊交互元素的相邻兄弟节点的行段之间的位置关系,判断是否选定特殊交互元素并进入步骤(334);(334)根据判断结果进行选择,若选定特殊交互元素,则阻止默认事件并返回步骤(31),若不选定特殊交互元素,则进入步骤(34)。优选地,所述的步骤(332)具体包括以下步骤:(3321)判断用户触发的按键是否为左方向键或退格键,若是则进入步骤(3322),若否则进入步骤(3323);(3322)判断当前的光标选区是否处于特殊交互元素后相邻兄弟节点的一级子孙节点中,且光标的偏移量处于首个字符之前,若是则表明选定特殊交互元素并进入步骤(334),若否则表明未选定特殊交互元素并进入步骤(334);(3323)判断当前的光标选区是否处于特殊交互元素前相邻兄弟节点的最后一个子孙节点中,且光标偏移量处于最末端字符之后,若是则表明选定特殊交互元素并进入步骤(334),若否则表明未选定特殊交互元素并进入步骤(334)。优选地,所述的步骤(333)具体包括以下步骤:(3331)判断用户出发的按键是否为上方向键,若是则进入步骤(3332),若否则进入步骤(3333);(3332)判断当前的光标选区是否处于特殊交互元素后相邻兄弟节点的第一行段中,若是则表明选定特殊交互元素并进入步骤(334),若否则表明未选定特殊交互元素并进入步骤(334);(3333)判断当前的光标选区是否处于特殊交互元素前相邻兄弟节点的最末行段中,若是则表明选定特殊交互元素并进入步骤(334),若否则表明未选定特殊交互元素并进入步骤(334)。优选地,所述的默认事件包括光标的移动和非特殊交互元素的删除。一种计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时,实现上述中任一项的基于键盘光标的特殊交互元素编辑方法。一种页面编辑装置,包括处理器和存储器,所示的存储器上存储有计算机程序,该计算机程序被所述处理器执行时,实现上述中任一项的基于键盘光标的特殊交互元素编辑方法。与现有技术相比,本专利技术具有以下有益效果:(1)本专利技术提出的方法,通过对用户按键触发事件的监听,来判断当前的光标选区和特殊交互元素之间的位置关系,从而可以得到特殊交互元素的选定状态,根据特殊交互元素的选定状态、按键触发情况和光标与特殊交互元素之间的位置关系,执行对应的操作,从而尽可能避免输入光标在对该元素和其上下文进行定位、删除等操作时无法准确定位和可能出现误删的情况,而且由于本专利技术提出的方法主要是基于光标位置关系和用户按键状态来进行的判断,因此不受浏览器类型的影响,从而解决了不同浏览器在此交互上表现不一致的问题。(2)特殊交互元素包括块级元素和不可编辑元素这两种最常见的容易出现交互问题的元素,普适性强,适用范围广。(3)在对元素或其上下文进行定位、删除操作时,可以根据用户的操作预期准确定位元素;输入光标处于元素下方时,通过方向键左、上和退格键对元素进行选中;输入光标处于元素上方时,通过方向键下、右对元素进行选择,上下键操作控制精确到行,左右和退格操作精确到字符,也可以直接通过鼠标定;在元素处于选中状态时继续操作方向键,输入光标移动至相应的上下文位置,这样的方法控制精确度高且操作方便,便于用户根据实际情况进行对应的操作。附图说明图1为本专利技术的基于键盘光标的特殊交互元素编辑方法的步骤流程图;图2为实施例中在监控到不同的按键触发事件时进行特殊交互元素编辑的方法流程图。具体实施方式为了能够更清楚地理解本专利技术的
技术实现思路
,特举以下实施例详细说明。请参阅图1所示,为本专利技术的基于键盘光标的特殊交互元素编辑方法的步骤流程图。在一种实施方式中,该基于键盘光标的特殊交互元素编辑方法,包括以下步骤:(1)监听用户的按键触发事件;(2)读取用户当前的光标选区;(3)根据步骤(2)读取的光标选区位置和用户的按键触发情况,对特殊交互元素执行相应的操作,并在操作完成后退出监听。其中,特殊交互元素包括块级元素和不可编辑元素。步骤(3)具体包括以下步骤:(31)根据步骤(2)读取的光标选区位置确定特殊交互元素是否处于选定状态,若是则进入步骤(32),若否则进入步骤(33);(32)根据用户的按键触发情况对特殊交互元素执行相应的操作,并进入步骤(34);(33)根据用户的按键触发情况和当前的光标本文档来自技高网
...

【技术保护点】
1.一种基于键盘光标的特殊交互元素编辑方法,其特征在于,所述的方法包括以下步骤:(1)监听用户的按键触发事件;(2)读取用户当前的光标选区;(3)根据步骤(2)读取的光标选区位置和用户的按键触发情况,对特殊交互元素执行相应的操作,并在操作完成后退出监听。

【技术特征摘要】
1.一种基于键盘光标的特殊交互元素编辑方法,其特征在于,所述的方法包括以下步骤:(1)监听用户的按键触发事件;(2)读取用户当前的光标选区;(3)根据步骤(2)读取的光标选区位置和用户的按键触发情况,对特殊交互元素执行相应的操作,并在操作完成后退出监听。2.根据权利要求1所述的基于键盘光标的特殊交互元素编辑方法,其特征在于,所述特殊交互元素包括块级元素和不可编辑元素。3.根据权利要求1所述的基于键盘光标的特殊交互元素编辑方法,其特征在于,所述步骤(3)具体包括以下步骤:(31)根据步骤(2)读取的光标选区位置确定特殊交互元素是否处于选定状态,若是则进入步骤(32),若否则进入步骤(33);(32)根据用户的按键触发情况对特殊交互元素执行相应的操作,并进入步骤(34);(33)根据用户的按键触发情况和当前的光标选区位置,判断是否选定特殊交互元素,若是则阻止默认事件并选定特殊交互元素,返回步骤(31),若否则进入步骤(34);(34)触发默认事件并退出监听。4.根据权利要求3所述的基于键盘光标的特殊交互元素编辑方法,其特征在于,所述步骤(32)具体包括以下步骤:(321)判断用户触发的按键是否为退格键,若是则进入步骤(322),若否则进入步骤(323);(322)删除特殊交互元素,并进入步骤(34);(323)消除特殊交互元素的选定状态,并进入步骤(34)。5.根据权利要求3所述的基于键盘光标的特殊交互元素编辑方法,其特征在于,所述步骤(33)具体包括以下步骤:(331)判断用户触发的按键是否为上方向键或下方向键,若是则进入步骤(333),若否则进入步骤(332);(332)根据当前的光标选区位置和特殊交互元素相邻兄弟节点的一级子孙节点之间的位置关系,以及光标的偏移量,判断是否选定特殊交互元素并进入步骤(334);(333)根据当前的光标选区位置和特殊交互元素的相邻兄弟节点的行段之间的位置关系,判断是否选定特殊交互元素并进入步骤(334);(334)根据判断结果进行选择,若选定特殊交互元素,则阻止默认事件并返回步骤(31)...

【专利技术属性】
技术研发人员:洪云剑
申请(专利权)人:上海哔哩哔哩科技有限公司
类型:发明
国别省市:上海,31

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1