以计算器为例介绍input操作焦点功能,兼容IE版本

前端操作input 的焦点功能 经常会用到,你会用到以下功能吗?

  1. 选中input框中的某几个字母,监听该事件,获取选中的字母内容。
  2. input的焦点向左移动一个,就像封面图一样,在括号中输入内容。前提是点击 input 下方的按钮,模拟键盘操作。

本文就结合 问题1 的概念,以复杂计算器为例,来解决问题2。

问题1 选中input 部分内容, 可以使用 selectionStart、 document.selection、 createRange、 createTextRange 等 API 来实现,具体不在此处展开说明。

问题2 需要解决一下几个小问题: 1) 点击计算器其他按钮,获取input 框当前 焦点停留的位置。

2) 拼接 input 旧值和 按钮新值

3) 设置 input 新的焦点位置,即老位置+按钮值长度 + 按钮功能需要变动的长度

4) 解决IE下点击按钮时,input焦点永远为0的行为。

(图为点击按钮时的代码)

以下内容基于jQuery-1.7实现

解决问题

1) 知识点 selectionStart, IE8及以下不支持该属性,使用document.selection 替代方案解决。具体代码如图:

输入:HTMLInputElement

输出:鼠标停留在 input 框中的位置。

2)js的substring方法。

获取到 input 光标的位置后,在中间插入新值即可。之后再讲将rangeStart 的值增加新值长度,表示当前坐标位置。

3)像一些函数 sin()、cos() 等带括号的功能,点击后,友善的行为是光标自动向前移动一位。绝对值函数此处用的是|()|,点击后需要向前移动两位。

故在这类函数的div上增加属性 cursor-position, 值是-1, -2等数字。

4)设置新的坐标位置。知识点:createTextRange、setSelectionRange

该方法是扩展的 jQuery插件方式定义函数。

输入:光标位置

输出:当前元素

另外:在IE下点击按钮获取光标位置时,浏览器默认为以当前最近元素为事件源。input会丢失光标,方法返回的永远是0。

解决方法是在 按钮等影响光标的Element上增加属性 unselectable="on".