搜狗发布了很有意思的javascript输入法 : 搜狗云输入法
基本原理即是:将一段js代码当作书签,当选择时执行,执行时动态插入一个script文件,来监控页面所有框并根据输入拼音异步请求服务器获得中文文字。
目前来看,尚存在一点问题:
1。':' 冒号mac下输不出来,看来是组合键处理上存问题
2。没有处理选择一段文本输入后替换原文字,目前是仍然插入输入区域后面
光标问题 :
其中重要一步,就是识别当前输入框的当前光标位置,并劫持用户输入,再选择汉字后将汉字插入当前输入位置。
而获取光标位置对于 IE 来说可是相当变态,缘于其复杂的 textrange 特性,而其他浏览器则实现了html5的相关属性,处理很简洁。
html5 selectionStart
ie textrange
在
TextArea Cursor Position with JavaScript
的评论中,Strifer 提出了一个比较好的思路,我对其封装修改了一下 :
演示@google code
核心在于对 ie textarea 编辑方面的封转
,使得其和标准浏览器表现一致。
PS :
注意这里的选择区域在规范中和页面的选择区域
并不同,参见规范:
Mostly for historical reasons, in addition to the browsing context
's selection
, each textarea
and input
element has an independent selection. These are the text field selections.
PS2 :
由于 ie 中选择区域只有一块,那么当 textarea 失去焦点时,下次再 focus textarea,在 ie 下光标每次都会跑到前面了,记不住曾经textare的选择区域了,而由于规范区分 textarea 与 input 的选择区域,则没这个问题,在 iframe
下也有类似问题。解决方案为每次 textarea 内的点击都要记录选择区域,当 textarea focusin
时立即恢复:
if (IE) {
var savedRange;
textarea.onmousedown
= textarea.onmouseup
= textarea.onkeydown
= textarea.onkeyup = function() {
savedRange = document.selection.createRange();
};
textarea.onfocusin = function() {
savedRange && savedRange.select();
};
}
PS3 :
moveStart
注意
在 ie 下 textarea 内容中的换行表示为 "\r\n" 长度为 2 ,而 range moveStart 当参数为 "character" 每次移动并指定数值为 1 时,会一次性掠过 \r\n,而会导致获得位置与实际的 textarea.value 字符串中位置不符。另外 range 的某一端(开始或结束)一定不会停留在\r与\n之间,于是当遇到计数光标位置的前方是 "\n",可加一跳过:
for (var sel_end = 0;
(flag = range_all.compareEndPoints('StartToEnd', range)) < 0;
sel_end++) {
if (textarea.value.charAt(sel_end) == '\n') {
sel_end++;
}
range_all.moveStart('character', 1);
}
//光标不可能停在\r,\n之间
if (textarea.value.charAt(sel_end) == '\n') {
sel_end++;
}
如图所示:
如果当前选择为 x\r\n
,则当实际计数位置从 1 经过 ++ 循环到 2 时,range 位置也经过 move 跳过 2 进入 3 ,导致 if 失败,从而计数位置到达 2 ,而实际应返回 3 ,这时可经过判断 2 位置的下一个字符为 “\n” 而执行 ++。
应用示例
身份证号输入即时验证,除了 keydown 外的 keyup 监控解决方案,利用 keyup 监控键入字符,前17位必须为数字,第18位可以是数字或x,X。
问题:
keyup 时木已成舟,无法阻止,若用户输错只能通过重新设置 input 的值,但是会使得光标随改动移至末尾,而不是保留在输入前的中间位置。
解决:
通过设置前保存光标位置,设置后重新restore光标位置,注意 ie 和标准浏览器的差别
demo:
身份证输入即时验证
- 大小: 14.3 KB
- 大小: 3.9 KB
分享到:
相关推荐
很好的兼容了IE、Chrome、火狐等多种主流浏览器,轻松获得指定控件光标所在位置的坐标。 用法: var elem = document.getElementById(控件id); var p = kingwolfofsky.getInputPositon(elem); p.left;//获得指定...
直接上代码 代码如下: var kingwolfofsky = { /** * 获取输入光标在页面中的坐标 * @param {HTMLElement} 输入框元素 * @return {Object} 返回left和top,bottom */ getInputPositon: function (elem) { if (document...
基本上可以实现邮件地址的智能提示。 可以获得光标在输入框的位置,从而确定选择框的坐标。
js获得光标所在的文本框(text/textarea)中的位置 jb51 HELLO! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
京东淘宝的密码输入框功能点 只能输入数字 只能输入6位字符 每次输入一个字符,对应位置的小黑点显示 ...第二种,当输入框获得焦点的时候,将输入框定位到屏幕外面,用户看不到输入框,自然也就看不到光
当输入框(input/textarea)获得焦点时,将焦点移动到最后,在某些情况下用户体验很好。网上的大部分方法都是针对IE浏览器的。 代码如下: var el = document.getElementById('txtArticle'); var range = el....
6,123|456 自动覆盖光标后输入的字符,此时光标在3后,继续输入111,会得到123111,而不用手动删除456 7,封装成vue单文件组件,方便任意调用。 模板代码 <div class=input-content @keydown=keydown @...
首先实现两个函数用来操作光标: 代码如下: // 得到一个文本框控件的当前光标位置 function getPos(obj) { obj.focus(); var workRange=document.selection.createRange(); obj.select(); var allRange=document....
易人信封打印软件的显示界面与打印结果一致,各打印内容在屏幕上的位置就是打印在纸上的位置,因此,需要调整位置只需根据“标尺网格”移动输入框的位置即可: 易人信封打印软件输入框移动方法一 (移动单个输入框)...
手动进程定义,将鼠标移动到你要自动发送消息的聊天室输入框(输入框不需要得到焦点)然后按F12,转回QQ聊神的进程窗口可以就可以看到你定义的进程了.用这种方法可以给线上好友自动发消息,但是需要把 聊天模式...
2.增加热键功能,可用光标配合Ctrl,Shift对文字大小和位置修改 3.增加精简输出格式选项 4.把文字输入框换成了文字输入组合框,这样就可以保存历史纪录。 5.输出数据会自动清除以前的数据 6.可隐藏自定义格式,...
在京东商城网页版,无论你在什么位置,只需要按下S键,就可以将光标定位到搜索栏进行搜索。虽然说这是一个很不错的功能,但是貌似没有几个人知道。 程序实现很简单,在s键上升的时候搜索框获得焦点就可以了。 <!...
ENTER键可以让光标移到下一个输入框.html IE地址栏前换成自己的图标 .html TEXTAREA自适应文字行数的多少.html title显示日期.html 不准粘贴.html 不能为空和邮件地址的约束.html 不要滚动条.html 光标是停...
它先使用WindowFromPoint函数获得鼠标释放时,鼠标光标所在位置的窗口句柄。如果鼠标是在本程序的窗口内释放,将弹出一个关于消息框。否则,就将获得的窗口句柄进行判断,如果是一个密码框,就给它发送WM_...
增加热键功能,可用光标配合Ctrl,Shift对文字大小和位置修改 3.增加精简输出格式选项 4.把文字输入框换成了文字输入组合框,这样就可以保存历史纪录。 5.输出数据会自动清除以前的数据 6.可隐藏自定义格式,简化...
增加热键功能,可用光标配合Ctrl,Shift对文字大小和位置修改 3.增加精简输出格式选项 4.把文字输入框换成了文字输入组合框,这样就可以保存历史纪录。 5.输出数据会自动清除以前的数据 6.可隐藏自定义格式,简化...
增加热键功能,可用光标配合Ctrl,Shift对文字大小和位置修改 3.增加精简输出格式选项 4.把文字输入框换成了文字输入组合框,这样就可以保存历史纪录。 5.输出数据会自动清除以前的数据 6.可隐藏自定义格式,简化...
3.在logindlg.ui 中设计下面的界面:行输入框为Line Edit。其中用户名后面 的输入框在属性中设置其object Name 为usrLineEdit,密码后面的输入框为 pwdLineEdit,登录按钮为loginBtn,退出按钮为exitBtn。 4.将...