使用方向键在输入框矩阵中自然的导航

简介:

 关于使用键盘来在Web页的输入框中导航这个事我一周前就说了,今天才把它整理完,真是不好意思。不过整理后的代码结构清晰、使用方便、价格公道、童叟无欺。
    主要的核心技术就是两个,一个是:使用TextRange获取输入框中光标的位置,另一个是:为Web页中的TABLE对象创建一个映射表。其中获取输入框中的光标位置,是为了使用户在输入框间切换时,还能在同一个输入框中继续使用上下左右键移动光标,否这一但使用方向键就切换回很难与使用的。建立Table的映射表是为了解决查找当前输入框的切换目标输入框。
    由于昨天介绍了Mapping的方法,所以获取sibling的输入框就变的非常的简单,代码为:

ContractedBlock.gif < script  language ="javascript" > dot.gif script>

    由于up和down,left和right其实是相同的搜索代码,所以使用一个incV和incH把它们合并成了一段代码。如果在被查询单元格的同列或同行上没有别的输入框,那么siblingCell返回null。
    由于使用了Table的Mapping结果后,键盘的处理反而比查询sibling cell还复杂那么一点点了,处理代码如下:

ContractedBlock.gif< script  language="javascript"> dot.gif script>
    麻烦的地方是,需要区别对待INPUT和TEXTAREA这两个输入框元素。对于INPUT的处理很简单,UP和DOWN直接就执行跳离,LEFT的时候看看光标POSITION是否为0,RIGHT的时候看看是否为input.value.length。而TEXTAREA的LEFT和RIGHT和INPUT的处理是一样的,但是它的UP和DOWN为了让用户用起来比较的自然,加入了一个 KeyNavigation.PreviousCursorPosition,用来记忆上一次的按键时TEXTAREA里的光标位置,当响应UP和DOWN的时候,如果光标不在输入框TEXTAREA的两头(0和input.value.length),那么需要KeyNavigation.PreviousCursorPosition==iPsn才执行跳离操作。
    说了半天不明白,自己试试Navigate的效果就知道了emsmile.gif。    
   
text
text
text texttext textsdaf
text text
texttext textsdaf text
text
text
text text
text
texttext textsdaf text
texttext textsdaf asdfsdfsdf
text

    操作体验还算自然吧emwink.gif


本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

目录
相关文章
|
5月前
|
小程序
小程序右上角的胶囊颜色怎么修改?
小程序右上角的胶囊颜色怎么修改?
66 0
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
|
4月前
【sgOvalMenu】自定义组件:椭圆形菜单,菜单按钮可以随着椭圆轨迹进行循环运动
【sgOvalMenu】自定义组件:椭圆形菜单,菜单按钮可以随着椭圆轨迹进行循环运动
|
4月前
|
iOS开发
ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱
ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱
35 1
模拟京东按键输入案例(无论光标在什么位置,按s键即可将光标定位到搜索框)
模拟京东按键输入案例(无论光标在什么位置,按s键即可将光标定位到搜索框)
模拟京东按键输入案例(无论光标在什么位置,按s键即可将光标定位到搜索框)
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
|
前端开发 JavaScript 计算机视觉
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
935 0
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
|
前端开发
html+css鼠标经过的样式变化例题
当用户移动鼠标到指定的区域或内容时,会出现什么不一样的渲染效果呢?看这篇文章一起来了解吧!
110 0
 html+css鼠标经过的样式变化例题
|
Java
swing中一些常见的鼠标事件(鼠标形状的改变、鼠标接近、按下(图标的切换)、鼠标接近、离开(字体颜色的改变)、鼠标拖拽等)还有系统托盘+对话框
swing中一些常见的鼠标事件(鼠标形状的改变、鼠标接近、按下(图标的切换)、鼠标接近、离开(字体颜色的改变)、鼠标拖拽等)还有系统托盘+对话框
416 0
swing中一些常见的鼠标事件(鼠标形状的改变、鼠标接近、按下(图标的切换)、鼠标接近、离开(字体颜色的改变)、鼠标拖拽等)还有系统托盘+对话框
灰色3D按钮组合
在线演示 本地下载
597 0