2024年6月11日发(作者：)
(19)中华人民共和国国家知识产权局
(12)发明专利说明书
(21)申请号 CN2.5
(22)申请日 2012.12.13
(71)申请人 腾讯科技(深圳)有限公司
地址 518044 广东省深圳市福田区振兴路赛格科技园2栋东403室
(72)发明人 李晶 郭学亨 陈映平 吴浩 刘恒兵 龙丁奋
(74)专利代理机构 北京德琦知识产权代理有限公司
代理人 杨春香
(51)
G06F17/30
权利要求说明书 说明书 幅图
(10)申请公布号 CN 103870484 A
(43)申请公布日 2014.06.18
(54)发明名称
网页坐标获取方法和装置
(57)摘要
本申请提供了网页坐标获取方法和
装置。其中，该方法包括：对目标输入框
执行用于消除浏览器排版差异的排版样式
处理；创建一个与目标输入框对应的副本
层，设置所述副本层对用户不可见，并依
据所述目标输入框的排版样式指定所述副
本层的排版样式；判断目标输入框内是否
存在与目标标识相关联的关联字符，是则
将与目标标识相关联的关联字符、以及针
对目标标识构造的定位元素一起写入至副
本层，否则将针对目标标识构造的定位元
素写入至副本层；依据所述目标输入框的
网页坐标、所述副本层的网页坐标、以及
定位元素的网页坐标计算所述目标标识的
网页坐标。采用本发明，实现了在兼容目
前主流浏览器的前提下准确获取输入框内
字符或光标的网页坐标。
法律状态
法律状态公告日
法律状态信息
法律状态
权 利 要 求 说 明 书
1.一种网页坐标获取方法，其特征在于，该方法包括：
对目标输入框执行用于消除浏览器排版差异的排版样式处理；
创建一个与目标输入框对应的副本层，设置所述副本层对用户不可见，并依
判断目标输入框内是否存在与目标标识相关联的关联字符，如果是，将与目
标标识相关联的关联字符、以及针对目标标识构造的定位元素一起写
层，所述定位元素在所述副本层中紧邻所述关联字符之
标标识构造的定位元素写入至副本层；
据所述目标输入框的排版样式指定所述副本层的排版样式；
入至副本
后，如果否，将针对目
依据所述目标输入框的网页坐标、所述副本层的网页坐标、以及定位元素的
2.根据权利要求1所述的方法，其特征在于，所述排版样式处理至少包括：
为所述目标输入框配置以下版本样式属性：单词换行word-wrap属性和文本
指定所述目标输入框的word-wrap属性为第一属性值，所述第一属性值用于
表示当单词word长度达到设定长度时触发浏览器强制对该单词折行显示；
空白符处理white-space属性；
网页坐标计算所述目标标识的网页坐标。
指定所述目标输入框的white-space属性为第二属性值，所述第二属性值用
3.根据权利要求2所述的方法，其特征在于，所述依据目标输入框的排版
遍历所述目标输入框的版本样式属性，将遍历到的版本样式属性配置在所述
副本层，并指定所述副本层和所述目标输入框上相同的版本样式属性
的属性值；
样式指定副本层的排版样式包括：
于表示：保留空白符、保留换行符、以及允许自动换行。
具有相同
基于所述目标输入框具有的禁止溢出overflow特性，为所述副本层配置
属
4.根据权利要求1所述的方法，其特征在于，所述将与目标标识相关联的
overflow属性，并指定所述副本层的overflow属性为第三属性值，所述第三
性值用于防止副本层写入的字符撑开副本层。
关联字符、以及针对目标标识构造的定位元素一
起写入至副本层包括：
判断与目标标识相关联的关联字符中是否存在设定字符，所述设定字符为与
如果是，对所述关联字符中的设定字符进行转义处理，将处理后的关联字符、
以及针对目标标识构造的定位元素一起写入至副本层；
网页标签代码相同或相近的字符；
如果否，将所述关联字符、以及针对目标标识构造的定位元素一起写入至副
5.根据权利要求4所述的方法，其特征在于，所述设定字符至少包括：双
6.根据权利要求1所述的方法，其特征在于，所述目标标识为目标输入框
所述判断目标输入框内是否存在与目标标识相关联的关联字符包括：判断所
述目标输入框内的目标标识之前是否存在字符，如果是，确定目标输
在与目标标识相关联的关联字符，否则，确定目标输入
相关联的关联字符；
内的字符；
引号"，小于号<，大于号>，and符号&，空格。
本层。
入框内存
框内不存在与目标标识
所述与目标标识相关联的关联字符包括：目标输入框内目标标识之前的所有
7.根据权利要求6所述的方法，其特征在于，所述针对目标标识构造的定
字符。
位元素为设定的辅助定位元素，所述设定的辅助定位元素的宽度小于设定宽
对网页坐标的计算无影响；或者， 度，
所述针对目标标识构造的定位元素为通过网页标签封装的作为目标标识的
字符。
8.根据权利要求1所述的方法，其特征在于，所述目标标识为目标输入框
内的光标；
所述判断目标输入框内是否存在与目标标识相关联的关联字符包括：判断所
述目标输入框内的目标标识之前是否存在字符，如果是，确定目标输
在与目标标识相关联的关联
相关联的关联
入框内存
字符，否则，确定目标输入框内不存在与目标标识
字符；
所述与目标标识相关联的关联字符包括：目标输入框内目标标识之前的所有
9.根据权利要求8所述的方法，其特征在于，所述针对目标标识构造的定
字符。
位元素为设定的辅助定位元素，所述设定的辅助定位元素的宽度小于设定宽
对网页坐标的计算无影响。 度，
10.根据权利要求1所述的方法，其特征在于，所述目标标识为目标输入框
所述判断目标输入框内是否存在与目标标识相关联的关联字符包括：识别出
所述目标输入框内在目标标识之前、且紧邻所述目标标识的字符，判
内的光标；
断目标输 入框内该识别出的字符之前是否存在字符，如果是，确
目标标识相关联的关联字符，否则，确定
联的关联字符；
定目标输入框内存在与
目标输入框内不存在与目标标识相关
所述与目标标识相关联的关联字符包括：目标输入框内所述识别出的字符之
11.根据权利要求10所述的方法，其特征在于，所述针对目标标识构造的
12.根据权利要求1至11任一所述的方法，其特征在于，所述依据目标输
述
识别所述副本层中的定位元素是否为设定的辅助定位元素；
如果是，采用以下公式计算目标标识的网页坐标：X=Xa-Xb+Xc，
如果否，采用以下公式计算目标标识的网页坐标：X=Xa-Xb+Xc+Wc，
其中，X为目标标识的左上角在网页中的横坐标，Y为目标标识的左上角在
网页中的纵坐标，Xa为目标输入框的左上角在
Y=Ya-Yb+Yc；
Y=Ya-Yb+Yc；
定位元素为通过网页标签封装的所述识别出的字符。
前的所有字符。
入框的网页坐标、所述副本层的网页坐标、以及定位元素的网页坐标计算所
目标标识的网页坐标包括：
网页中的横坐标，Ya为目标输入 框的左上角在网页中的纵坐标，
为副本层的左上角在
标，
Xb为副本层的左上角在网页中的横坐标，Yb
网页中的纵坐标，Xc为定位元素的左上角在网页中的横坐
Wc为定位元素的宽度，Yc为定位元素的左上角在网页中的纵坐标。
13.一种应用于网页坐标获取的装置，其特征在于，该装置包括：
处理单元，用于对目标输入框执行用于消除浏览器排版差异的排版样式处
创建单元，用于创建一个与目标输入框对应的副本层，设置所述副本层对用
户不可见，并依据所述目标输入框的排版样式指定所述副本层的排版
理；
样式；
写入单元，用于判断目标输入框内是否存在与目标标识相关联的关联字符，
如果是，将与目标标识相关联的关联字符、以及针对目标标识构造的
一起写入至副本层，所述定位元素在所述副本层中紧邻
果否，将针对目标标识构造的定位元素写
定位元素
所述关联字符之后，如
入至副本层；
计算单元，用于依据所述目标输入框的网页坐标、所述副本层的网页坐标、
14.根据权利要求13所述的装置，其特征在于，所述处理单元执行的排版
以及定位元素的网页坐标计算所述目标标识的网页坐标。
样式处理至少包括：
为所述目标输入框配置以下版本样式属性：单词换行word-wrap属性和文本
指定所述目标输入框的word-wrap属性为第一属性值，所述第一属性值用于
指定所述目标输入框的white-space属性为第二属性值，所述第二属性值用
15.根据权利要求14所述的装置，其特征在于，所述创建单元依据目标输
遍历所述目标输入框的版本样式属性，将遍历到的版本样式属性配置在所述
副本层，并指定所述副本层配置的版本样式属性与所述目标输入框上
本样式属性具有相同的属性
入框的排版样式指定副本层的排版样式包括：
于表示：保留空白符、保留换行符、以及允许自动换行。
表示当单词word长度达到设定长度时触发浏览器强制对该单词折行显示；
空白符处理white-space属性；
相同的版
值；
基于所述目标输入框的禁止溢出overflow特性，为所述副本层配置overflow
属性，并指定所述副本层的overflow属性为第三属性值，用于防止向副本
入的字符撑开副本层。 层写
16.根据权利要求13所述的装置，其特征在于，所述写入单元通过以下子
的
单元将与目标输入框内目标标识相关联的关联字符、以及针对目标标识构造
定位元素一起写入至副本层：
判断子单元，用于判断与目标标识相关联的关联字符中是否存在设定字符，
所述设定字符为与网页标签代码相同或相近的字符，至少包括：双引
号<，大于号>，and符号&，空格； 号"，小于
写入子单元，用于在所述判断子单元判断出所述关联字符中存在设定字符
时，对该确定的关联字符中的设定字符进行转义处理，将处理后的关联字符、
以及针对目标标识构造的定位元素一起写入至副本层，在所述
出所述关联字符中不存在设定字符时，直接将所
识构造的定位元素一起写入至副本
判断子单元判断
述关联字符、以及针对目标标
层。
17.根据权利要求13所述的装置，其特征在于，所述目标标识为目标输入
框内的字符；
所述判断目标输入框内是否存在与目标标识相关联的关联字符包括：判断所
述目标输入框内目标标识之前是否存在字符，如果是，确定目标输入
与目标标识相关联的关联字符，否则，确定目标输入框
关联的关联字符；
框内存在
内不存在与目标标识相
所述与目标标识相关联的关联字符包括：目标输入框内目标标识之前的所有
所述针对目标标识构造的定位元素为设定的辅助定位元素，所述设定的辅助
字符；
定位元素的宽度小于设定宽度，对网页坐标的计算无影响；或者，所
标标识构造的定位元素为通过网页标签封装的作为目标
述针对目
标识的字符。
18.根据权利要求13所述的装置，其特征在于，所述目标标识为目标输入
框内的光标；
所述判断目标输入框内是否存在与目标标识相关联的关联字符包括：判断所
述目标输入框内目标标识之前是否存在字符，如果是，确定目标输入
与目标标识相关联的关联字符，否则，确定目标输入框
关联的关联字符；
框内存在
内不存在与目标标识相
所述与目标标识相关联的关联字符包括：目标输入框内目标标识之前的所有
所述针对目标标识构造的定位元素为设定的辅助定位元素，所述设定的辅助
19.根据权利要求13所述的装置，其特征在于，所述目标标识为目标输入
所述判断目标输入框内是否存在与目标标识相关联的关联字符包括：识别出
所述目标输入框内在目标标识之前、且紧邻所述目标标识的字符，判
入框内该识别出的字符之前是否存在字符，如果是，确
框内的光标；
定位元素的宽度小于设定宽度，对网页坐标的计算无影响。
字符；
断目标输
定目标输入框内存在与 目标标识相关联的关联字符，否则，确定
联的关联字符； 目标输入框内不存在与目标标识相关
所述与目标标识相关联的关联字符包括：目标输入框内所述识别出的字符之
所述针对目标标识构造的定位元素为通过网页标签封装的所述识别出的字
20.根据权利要求13至19任一所述的装置，其特征在于，所述计算单元所
页
识别所述副本层中的定位元素是否为设定的辅助定位元素；
如果是，采用以下公式计算目标标识的网页坐标：X=Xa-Xb+Xc，
如果否，采用以下公式计算目标标识的网页坐标：X=Xa-Xb+Xc+Wc，
其中，X为目标标识的左上角在网页中的横坐标，Y为目标标识的左上角在
网页中的纵坐标，Xa为目标输入框的左上角在网页中的横坐标，Ya为目标
框的左上角在网页中的纵坐标，Xb为副本层的左上角在网页
为副本层的左上角在网页中的纵坐标，Xc为定
标，Wc为定位元素的宽度，Yc为
Y=Ya-Yb+Yc；
Y=Ya-Yb+Yc；
述依据目标输入框的网页坐标、所述副本层的网页坐标、以及定位元素的网
坐标计算所述目标标识的网页坐标包括：
符。
前的所有字符；
输入
中的横坐标，Yb
位元素的左上角在网页中的横坐
定位元素的左上角在网页中的纵坐标。
说 明 书
技术领域
本申请涉及互联网技术，特别涉及网页坐标方法和装置。
背景技术
在互联网应用中，获取输入框内字符和/或光标的网页坐标是非常重要的。
比如，在微博应用中，当在输入框内输入@时，在光标附近就显示一个下拉
要定位这个下拉框，就需要获取输入框内光标的网页坐标，或者距离
的字符的网页坐标。
框，
光标最近
目前，获取输入框内字符或光标的网页坐标主要通过以下两种方法实现，
方法1：其通过模拟浏览器的排版样式实现，具体为：在浏览器的当前排版
如
中先获取目标输入框的网页坐标，再确定目标字符在目标输入框的位置，比
在目标输入框的M行N列，然后获取以下参数：目标输入框内字符
高、字符间距和输入框的左右边距，最后根据获取的各个参数
网页坐标。
以获取字符的网页坐标为例，获取光标的网页坐标原理类似：
的大小、行
计算目标字符的
方法2：该方法仅限于IE浏览器，其主要是利用IE浏览器中选区（TextRange）
的上偏移（offsetTop）和左偏移（offsetLeft）属性，具体为：创建一个选区
为R），在目标输入框中选取目标字符的前一个字符并记录至R内，
标输入框的网页坐标（X0，Y0）、R的offsetTop（记为
（ngwidth）、R的offsetLeft（记为
算目标字符的网页坐标（X，Y）：
（记
然后获取目
Top）、R的宽度
Left），之后采用以下公式计
X=X0+Left+ngwidth；
Y=Y0+Top。
从上面描述看出，上述的方法1或方法2均能获取输入框内字符或光标的
览
网页坐标，但是，方法1是通过模拟浏览器的排版样式实现，而由于不同浏
器其具有不同的排版布局，比如存在一些细节上的差异，这会导致不
最终计算的目标字符的网页坐标不准确；并且，方法1还受到
而方法2虽然能解决方法1的问题，但仅限于IE浏览
同浏览器
滚动条的影响。
器，应用范围比较局限。
发明内容
本申请提供了网页坐标获取方法和装置，以实现在兼容目前主流浏览器的前
本申请提供的技术方案包括：
一种网页坐标获取方法，包括：
对目标输入框执行用于消除浏览器排版差异的排版样式处理；
创建一个与目标输入框对应的副本层，设置所述副本层对用户不可见，并依
判断目标输入框内是否存在与目标标识相关联的关联字符，如果是，将与目
本
标标识相关联的关联字符、以及针对目标标识构造的定位元素一起写入至副
层，所述定位元素在所述副本层中紧邻所述关联字符之后，如果否，
据所述目标输入框的排版样式指定所述副本层的排版样式；
提下准确获取输入框内字符或光标的网页坐标。
将针对目
标标识构造的定位元素写入至副本层；
依据所述目标输入框的网页坐标、所述副本层的网页坐标、以及定位元素的
一种应用于网页坐标获取的装置，包括：
处理单元，用于对目标输入框执行用于消除浏览器排版差异的排版样式处
创建单元，用于创建一个与目标输入框对应的副本层，设置所述副本层对用
写入单元，用于判断目标输入框内是否存在与目标标识相关联的关联字符，
素
如果是，将与目标标识相关联的关联字符、以及针对目标标识构造的定位元
一起写入至副本层，所述定位元素在所述
果否，将针对目标标识构造的定位
户不可见，并依据所述目标输入框的排版样式指定所述副本层的排版样式；
理；
网页坐标计算所述目标标识的网页坐标。
副本层中紧邻所述关联字符之后，如
元素写入至副本层；
计算单元，用于依据所述目标输入框的网页坐标、所述副本层的网页坐标、
由以上技术方案可以看出，本发明对目标输入框执行用于消除浏览器排
版差异的排版样式处理，这样，就不会出现针对不同浏览器计算的目标标识
的网页坐标不同的问题，并且，本发明在获取目标输入框内目标标识
符或光标的网页坐标时，依赖于浏览器绘制的副本层、目标输
位元素的网页坐标，完全不受滚动条的影响，保证输入
以及定位元素的网页坐标计算所述目标标识的网页坐标。
比如字
入框、以及定
框内目标标识比如字
附图说明
符或光标的网页坐标计算结果准确。
图1为本发明实施例提供的方法流程图；
图2为本发明实施例提供的指定副本层排版样式的流程图；
图3为本发明实施例提供的步骤104实现流程图；
图4为本发明实施例提供的步骤106实现流程图；
图5为本发明实施例提供的装置结构图。
具体实施方式
为了使本发明的目的、技术方案和优点更加清楚，下面结合附图和具体
参见图1，图1为本发明实施例提供的方法流程图。如图1所示，该流
步骤101，对目标输入框执行用于消除浏览器排版差异的排版样式处理。
本步骤101的目的在于消除浏览器对目标输入框内文字排版的差异。其
中，所述排版样式处理至少包括：为所述目标输入框配置单词换行
（word-wrap）属性和文本空白符处理（white-space）属性，并针对配置的
word-wrap属性和white-space属性进行相应设置。
属性和white-space属性进行描述：
程可包括以下步骤：
实施例对本发明进行详细描述。
下面对如何设置word-wrap
word-wrap属性是用于控制换行的，用来标明是否允许浏览器在单词内
进行换行。当一个单词太长时，如果不配置这个word-wrap属性，或者配置
了该word-wrap属性，但将其设置为默认值（normal），浏览器就不会在这
个单词内部换行，这样的后果是目标输入框会被撑开或者内部的单词溢出边
界导致部分字符不可见。而如果设置这个word-wrap属性为第一属性
break-word，那么这种情况下浏览器会强制这个很长的单词折
此，本发明就针对word-wrap属性设置为第一属性值比
该设置，能够保证目标输入框在任何情况下，其被显示
排版样式宽度一致，同时目标输入框内部的字符
值比如
行显示，基于
如break-word，通过
的宽度都能和自身的
也不会溢出边界。
white-space属性用于设置文本空白符的处理规则，其中，该处理规则至
少包括：是否合并空白符、是否保留换行符、是否允许自动换行。目前，大
部分浏览器默认white-space属性为第二属性值比如pre-warp，基于
证本发明的兼容性，本发明中，针对white-space属性设置为
pre-warp，用于明确的告诉各浏览器，针对目标输入框
的处理规则来处理文本空白符。其中，pre-wrap
保留空白符、保留换行符、以及允许自动
此，为保
第二属性值比如
都按照pre-wrap对应
对应的处理规则用于表示：
换行。
步骤102，创建一个与目标输入框对应的副本层，设置所述副本层对用户不
框
本步骤102中，设置副本层对用户不可见具体可通过设置副本层的位置参
数即垂直层级（z-index）、透明度（opacity）、相对父节点的水平位置
和垂直位置（Top）来实现，下面进行描述：
可见，以使得用户在当前浏览区域看不到这个副本层，并依据所述目标输入
的排版样式指定所述副本层的排版样式。
（Left）
设置所述副本层的z-index为比较低的层级，比如取值为-9999，其中，z-index
越大，越位于顶部，越小，越位于底部，在网页正常情况下，z-index都不
置成-9999这么低的层级，而本发明将副本层的z-index设置为-9999，
保证这个副本层中的内容会被完全
而且也无法通过鼠标触发副
会设
基本可以
挡住，这样用户不但看不见副本层中的内容，
本层中的内容。
设置所述副本层的opacity为用于表示完全透明的设定值。作为本发明的一
个实施例，设定值可为0。这里设置副本层的opacity完全透明，目的是让
看不到副本层。 用户
设置Left为第一设定像素值，其中，该第一设定像素值用于表示副本层相
对父节点的水平距离，优选地，本发明中，该第一设定像素值可为-9999像
在应用中，网页的元素都是采用树形结构组织的，副本层作为网页的
其也是组织在树形结构上的，具有自己的父节点。当副本层与
9999像素时，该9999像素比较大，超出屏幕的可视范
素。
一个元素，
父节点水平相距
围了，所以都用户不可见。
设置Top为第二设定像素值。其中，该第二设定像素值用于表示副本层相
对父节点的垂直距离，优选地，本发明中，该第二设定像素值可为-9999像
在应用中，网页的元素都是采用树形结构组织的，副本层作为网页的
其也是组织在树形结构上的，具有自己的父节点。当副本层与
9999像素时，该9999像素比较大，超出屏幕的可视范
素。
一个元素，
父节点垂直相距
围了，所以都用户不可见。
至此，通过上述四个设置能够保证创建的与目标输入框对应的副本层对用
户不可见。需要说明的是，本发明中，副本层的位置可不限定，也可进行限
定，
标输入框
其中，在进行限定时，一种较佳的实施方式为：将副本层定位至与目
相同的位置，其可通过以下定位方式实现：position：fixed。
另外，本步骤102中，依据所述目标输入框的排版样式指定所述副本层的
目
步骤103，判断目标输入框内是否存在与目标标识相关联的关联字符，如
本发明中，目标标识可为目标输入框内的字符（简称目标字符）或者光标
其中，当目标标识为目标字符时，步骤103中判断目标输入框内是否存在
是
与目标标识相关联的关联字符包括：判断所述目标输入框内的目标标识之前
否存在字符，如果是，确定目标输入框内存在与目标标识相关联的关
否则，确定目标输入框内不存在与目标标识相关联的关联字符。
目标输入框内在所述目标标识之前的所有字符作为所述
联字符。
（简称目标光标）。
果是，执行步骤104，如果否，执行步骤105。
排版样式可通过下文的图2所示流程实现。通过步骤102能够保证副本层和
标输入框的排版样式一致。
联字符，
相应地，可将
与目标标识相关联的关
而目标标识为目标光标时，步骤103中判断目标输入框内是否存在与目标
方式1：
本方式1下，判断目标输入框内是否存在与目标标识相关联的关联字符包
括：判断所述目标输入框内的目标标识之前是否存在字符，如果是，确定目
标识相关联的关联字符具体可通过以下两种方式中的任一方式实现：
标 输入框内存在与目标标识相关联的关联字符，否则，确定目标输入框
与目标标识相关联的关联字符。 内不存在
相应地，本方式1下，将目标输入框内在所述目标标识之前的所有字符确定
至此，完成方式1的描述。基于方式1的描述可以看出，方式1是将目标输
方式2：
本方式2下，所述判断目标输入框内是否存在与目标标识相关联的关联字符
包括：识别出所述目标输入框内在目标标识之前、且紧邻所述目标标识的字
判断目标输入框内该识别出的字符之前是否存在字符，如果是，确定
框内存在与目标标识相关联的关联字符，否则，确定目标输入
标标识相关联的关联字符；
入框内目标标识之前的所有字符均作为与目标标识相关联的关联字符。
为与目标标识相关联的关联字符。
符，
目标输入
框内不存在与目
相应地，本方式2下，将目标输入框内在所述识别出的字符之前的所有字符
基于方式2的描述，可以看出，本方式2与方式1不同，相比于方式1，本
相
至此，完成方式2的描述。
步骤104，将与目标输入框内目标标识相关联的关联字符、以及针对目标
标识构造的定位元素一起写入至副本层，所述定位元素在所述副本层中紧邻
方式2是将目标标识之前除上述识别出的字符之外的其他字符作为目标标识
关联的字符。
确定为与目标标识相关联的关联字符。
所
述关联字符之后。之后执行步骤106。
本步骤104如何将与目标输入框内目标标识相关联的关联字符、以及针对目
不
其中，本发明中，当目标标识为目标字符时，所述针对目标标识构造的定位
度
元素可为设定的辅助定位元素，所述设定的辅助定位元素的宽度小于设定宽
比如1像素，对网页坐标的计算无影响；或者，所述针对目标标识构
元素为通过网页标签比如span封装的作为目标标识的字符。
标标识构造的定位元素一起写入至副本层具体可参见图3所示流程。这里暂
赘述。
造的定位
而当目标标识为目标光标时，如果目标标识的关联字符是通过方式1确定
标
的，则所述针对目标标识构造的定位元素为设定的辅助定位元素，而如果目
标识的关联字符是通过方式2确定的，则所述针对目标标识构造的定
通过网页标签比如span封装的方式2内识别出的字符（该识
输入框内在目标标识之前、且紧邻所述目标标识的字
位元素为
别出的字符为目标
符）。
另外，本发明中，由于通过步骤102能够保证目标输入框和副本层的排版样
保
式一致，而本步骤104将与目标标识相关联的关联字符写入至副本层，能够
证该关联字符在目标输入框和副本层的排版样式一致。并且，本发明
层内将针对目标标识构造的定位元素写在目标标识的关联字符
位元素在副本层内的网页坐标就相当于目标标识在目标
从而将目标输入框内目标标识的网页坐标计算转
坐标计算。
还在副本
之后，这样该定
输入框内的网页坐标，
换成副本层内定位元素的网页
步骤105，将针对目标标识构造的定位元素写入至副本层。之后执行步骤
106。
本步骤105是在目标输入框内不存在与目标标识相关联的关联字符下执行
的。基于上面对关联字符的描述可以知道，比如当目标
标输入框内不存在与目标标识相关联的关联字符，
框内首个字符，由于通过步骤102能够保
致，而本步骤105将针对目标标识
素在副本层内的网页坐标就
将目标输入框内目标
计算。同样，
标识为目标字符时，目
意味着目标标识为目标输入
证目标输入框和副本层的排版样式一
构造的定位元素写入至副本层后，该定位元
相当于目标标识在目标输入框内的网页坐标，从而
标识的网页坐标计算转换成副本层内定位元素的网页坐标
当目标标识为目标光标时，原理类似，不再赘述。
步骤106，依据所述目标输入框的网页坐标、所述副本层的网页坐标、以
在一个网页内，大部分元素，其是由浏览器绘制的，浏览器会提供一个标
及
准的接口来获取这些元素的网页坐标。本发明中的目标输入框、副本层、以
定位元素均是属于这些元素，因此，本步骤106可通过调用浏览器提
来获取目标输入框、副本层、定位元素的网页坐标。
及定位元素的网页坐标计算所述目标标识的网页坐标。
供的接口
但是，在一个网页内，也有一些元素，其并非为浏览器绘制，而是通过调
输
用控件实现的，浏览器没有为这些元素提供任何接口来获取网页坐标。目标
入框内作为目标标识的目标字符、目标光标就属于这些元素。为了获
素的网页坐标，需要依赖于目标输入框、副本层、定位元素的
示出了如何计算目标标识的网页坐标流程。
取这些元
网页坐标，图4
至此，完成图1所示流程。
从图1所示流程可以看出，本发明对目标输入框执行用于消除浏览器排版
页
差异的排版样式处理，这样，就不会出现针对不同浏览器计算的目标标识网
坐标或光标网页坐标不同的问题，并且，本发明在获取目标输入框内
的网页坐标时，依赖于浏览器绘制的副本层、目标输入框、以
页坐标，完全不受滚动条的影响，保证目标标识的网页
目标标识
及定位元素的网
坐标计算结果准确。
下面对图2所示流程进行描述：
参见图2，图2为本发明实施例提供的指定副本层排版样式的流程图。如
步骤201，遍历所述目标输入框的版本样式属性，将遍历到的版本样式属
入
基于步骤101的排版样式处理描述，则执行到本步骤201时，遍历到的版
本样式属性肯定包含word-wrap属性和white-space属性。同时，在一些应
目标输入框本身还可能具有一些用于影响到排版的属性，也可
性，比如为以下几种排版样式属性中的一个或多个：
性配置在所述副本层，并指定所述副本层配置的版本样式属性与所述目标输
框上相同的版本样式属性具有相同的属性值。
图2所示，该流程可包括以下步骤：
用中，
称为排版样式属
设置元素左内边距（padding-left）属性、设置元素上内边距（padding-top）
上
属性、设置元素下内边距（padding-bottom）属性、设置元素右内边距
（padding-right）属性、设置元素左外内边距（margin-left）属性、设置元素
外内边距（margin-top）属性、设置元素下外内边距（margin-bottom）
置元素右外内边距（margin-right）属性、设置元素左边框的
属性、设置元素上边框的样式（border-top-style）
属性、设
样式（border-left-style）
属性、设置元素下边框的样式 （border-bottom-style）属性、设置元素右
设置元素左边框的宽度（border-
（border-top-width）属性、设置元
设置元素右边框的宽度
设置元素轮廓
边框的样式（border-right-style）属性、
left-width）属性、设置元素上边框的宽度
素下边框的宽度（border-bottom-width）属性、
（border-right-width）属性、设置行高（line-height）属性、
的样式，宽度，颜色（outline）属性、设置元素的整体高度（height）
属性、设置元素内部文字的字体名称（font-family）属性、设置元素内部文
字体大小（font-size）属性、设置元素内部文字的粗细（font-weight）
置元素内部文字的小型大写字母的字体（font-variant）属性、
的字体风格比如斜体(font-style)属性。
字的
属性、设
设置元素内部文字
基于此，本步骤201中，当遍历到一个目标输入框的版本样式属性，就在
属
副本层上配置一个相同的版本样式属性，并指定所述副本层配置的版本样式
性与所述目标输入框上相同的版本样式属性具有相同的属性值。以遍
目标输入框的版本样式属性为white-space属性为例，则本步
上配置white-space属性，同时，指定副本层上配置的
入框的white-space
外观样式、排
历到一个
骤201就在副本层
white-space属性与目标输
属性具有相同的属性值。通过步骤201，能够实现副本层的
版样式全部和目标输入框一样。
步骤202，基于所述目标输入框的禁止溢出（overflow）特性，为所述副本
层配置overflow属性，并指定所述副本层的overflow属性为第三属性值比
藏（hidden），用于防止向副本层写入的字符撑开副本层。 如隐
在目标输入框中，其中的字符是通过浏览器调用控件动态输入的，浏览器
通过目标输入框的word-wrap属性能够保证目标输入框不会被撑开，也能进
保证目标输入框内的字符不会溢出。而相比之下，本发明的副本层，
建的，其中的字符都是由浏览器写入的，如果不设置overflow
一步
其是新创
属性，其在浏览 器写入字符时可能会出现写入的字符撑开副本层，基于
观样式、排版样式全部和目标输入框一样，相比
针对副本层额外增加一个排版样式属性配
述副本层的overflow属性为第三
写入的字符撑开副本层。
此，为保证副本层的外
于目标输入框，本发明还需要
置，即配置overflow属性，并指定所
属性值比如隐藏（hidden），用于防止向副本层
至此，完成图2所示流程。通过图2所示流程能够保证副本层的外观样式、
下面对图3所示流程进行描述：
参见图3，图3为本发明实施例提供的步骤104实现流程图。如图3所示，
步骤301，判断所述与目标标识相关联的关联字符是否存在设定字符，如果
本步骤301中，设定字符可为与网页代码相同或相近的字符，比如为：双引
号（"），小于号（<），大于号（>），and符号（&），空格
符中存在该设定字符时，为避免与网页代码的字符混淆，
需要执行步骤302，反之，就执行步骤303。
是，执行步骤302，否则，执行步骤303。
该流程可包括以下步骤：
排版样式全部和目标输入框一样。
（）。当关联字
原样显示给用户，就
步骤302，对该关联字符中的设定字符进行转义处理，将处理后的关联字符、
副
这里，对关联字符中的设定字符进行转义处理，目的是将关联字符中的设
以及针对目标标识构造的定位元素一起写入至副本层，所述定位元素在所述
本层中紧邻所述关联字符之后。结束当前写入流程。
保
定字符转换为其他与网页代码不相同的字符，避免与网页代码的字符混淆，
证原样显示给用户。
假如关联字符为：
<1>目标:达到"1+1>2"的效果
则若原样把关联字符放入一个页面标签内部，具体如下：
<span id="test"><1> 目标:达到"1+1>2"的效果</span>；
浏览器分析上述页面标签内部的关联字符时，就会错乱，比如，不知道某
个大于号到底对应哪个小于号，同时，这些字符会被当成页面标签代码被解
而不是被呈现给用户。而通过对关联字符中设定的字符进行转义处理，
引号"被转义为"、<被转义为<、>被转
空格（）被转义为
析，
假如双
义为>、&被转义为&、
 ，则处理后的关联字符为：
<span id="test"><1>   &am
p;#160;目标: 达到
果</span>；
这样，首先，浏览器不再会错乱，且浏览器看到转义后的字符，会自动在
步骤303，直接将所述关联字符、以及针对目标标识构造的定位元素一起写
前
入至副本层，所述定位元素在所述副本层中紧邻所述关联字符之后。结束当
写入流程。
渲染文字时，把转义后的字符显示成转义前的字符呈现给用户。
"1+1>2"的效
本步骤303是在关联字符中不存在设定的字符时执行的，由于关联字符中
至
需要说明的是，步骤302或步骤303中的写入可采用内写入（innerHTML）
方式实现。其中，innerHTML是javascript用来获取和设置一个元素内部的
片段的一个属性，网页中的元素，都有这
因此，其具有innerHTML属性，
不存在设定的字符，浏览器不会错乱，因此，可直接将确定的关联字符写入
副本层。
html
个属性，而副本层属于网页中的元素，
可以采用innerHTML方式执行字符写入操作。
至此，完成图3所示流程。
下面对图4所示流程进行描述：
参见图4，图4为本发明实施例提供的步骤106实现流程图。如图4所示，
步骤401，识别所述副本层中的定位元素是否为设定的辅助定位元素，如果
步骤402，依据所述目标输入框的网页坐标、所述副本层的网页坐标、以
本发明中，公式1的具体实现形式为：
X=Xa-Xb+Xc，Y=Ya-Yb+Yc； （公式1）
其中，X为目标标识的左上角在网页中的横坐标，Y为目标标识的左上角在
网页中的纵坐标，Xa为目标输入框的左上角在网页中的横坐标，Ya为目标
及定位元素的网页坐标，并采用公式1计算目标标识的网页坐标。
是，执行步骤402，否则，执行步骤403。
该流程可包括以下步骤：
输入
坐标，Yb
框的左上角在网页中的纵坐标，Xb为副本层的左上角在网页中的横
为副本层的左上角在网页中的纵坐标，Xc为定位元素的左上
标，Yc为定位元素的左上角在网页中的纵坐标。 角在网页中的横坐
较佳地，在本发明中，若副本层定位至与目标输入框相同的位置，则意味
着副本层左上角的横、纵坐标与目标输入框左上角的横、纵坐标相等，基于
上述公式1中，Xa-Xb=0，Ya-Yb=0，公式1变成如下：X=Xc，
此，
Y=Yc。
步骤403，依据所述目标输入框的网页坐标、所述副本层的网页坐标、以
本发明中，公式2的具体实现形式可为：
X=Xa-Xb+Xc+Wc，Y=Ya-Yb+Yc； （公式2）
其中，X、Y、Xa、Xb、Xc、Ya、Yb、Yc如上所述。至于Wc，其为该定
较佳地，在本发明中，若副本层定位至与目标输入框相同的位置，则意味
着副本层左上角的横、纵坐标与目标输入框左上角的横、纵坐标相等，基于
上述公式3中，Xa-Xb=0，Ya-Yb=0，此时，公式2变成如下：
位元素的宽度。
及定位元素的网页坐标，并采用公式2计算目标标识的网页坐标。
此，
X=Xc+Wc，Y=Yc。
至此，完成图4所示的流程。
需要说明的是，在图4所示流程中，公式1、公式2的具体实现形式只是一
种举例，并非用于限定本发明。本发明还可根据实际情况采用其他实现形式。
至此，完成本发明提供的方法描述。
以上对本发明提供的方法进行了描述，下面对本发明提供的装置进行描述：
参见图5，图5为本发明实施例提供的装置结构图。如图5所示，该装置包
处理单元，用于对目标输入框执行用于消除浏览器排版差异的排版样式处
创建单元，用于创建一个与目标输入框对应的副本层，设置所述副本层对用
写入单元，用于判断目标输入框内是否存在与目标标识相关联的关联字符，
素
如果是，将与目标标识相关联的关联字符、以及针对目标标识构造的定位元
一起写入至副本层，所述定位元素在所述副本层中紧邻所述关联字符
果否，将针对目标标识构造的定位元素写入至副本层；
户不可见，并依据所述目标输入框的排版样式指定所述副本层的排版样式；
理；
括：
之后，如
计算单元，用于依据所述目标输入框的网页坐标、所述副本层的网页坐标、
优选地，所述处理单元执行的排版样式处理至少包括：
为所述目标输入框配置以下版本样式属性：单词换行word-wrap属性和文本
以及定位元素的网页坐标计算所述目标标识的网页坐标。
空白符处理white-space属性；
指定所述目标输入框的word-wrap属性为第一属性值，所述第一属性值用于
指定所述目标输入框的white-space属性为第二属性值，所述第二属性值用
优选地，所述创建单元依据目标输入框的排版样式指定副本层的排版样式包
遍历所述目标输入框的版本样式属性，将遍历到的版本样式属性配置在所述
版
基于所述目标输入框的禁止溢出（overflow）特性，为所述副本层配置
向
如图4所示，本发明中，所述写入单元通过以下子单元将与目标输入框内目
本
判断子单元，用于判断与目标输入框内目标标识相关联的关联字符是否存在
双
写入子单元，用于在所述判断子单元判断出所述关联字符中存在设定字符
设定字符，所述设定字符为与网页标签代码相同或相近的字符，至少包括：
引号"，小于号<，大于号>，and符号&，空格；
标标识相关联的关联字符、以及针对目标标识构造的定位元素一起写入至副
层：
overflow属性，并指定所述副本层的overflow属性为第三属性值，用于防止
副本层写入的字符撑开副本层。
副本层，并指定所述副本层配置的版本样式属性与所述目标输入框上相同的
本样式属性具有相同的属性值；
括：
于表示：保留空白符、保留换行符、以及允许自动换行。
表示当单词word长度达到设定长度时触发浏览器强制对该单词折行显示；
时，对该确定的关联字符中的设定字符进行转义处理，将处理后的关联字符、
以及针对目标标识构造的定位元素一起写入至副本层，在所述判断子
出所述关联字符中不存在设定字符时，直接将所述关联字符、
识构造的定位元素一起写入至副本层。
单元判断
以及针对目标标
本发明中，所述目标标识为目标输入框内的字符；
所述判断目标输入框内是否存在与目标标识相关联的关联字符包括：判断所
在
述目标输入框在目标标识之前是否存在字符，如果是，确定目标输入框内存
与目标标识相关联的关联字符，否则，确定目标输入框内不存在与目
关联的关联字符； 标标识相
所述与目标标识相关联的关联字符包括：目标输入框内且在所述目标标识之
所述针对目标标识构造的定位元素为设定的辅助定位元素，所述设定的辅助
目
本发明中，所述目标标识为目标输入框内的光标；
所述判断目标输入框内是否存在与目标标识相关联的关联字符包括：判断所
在
述目标输入框在目标标识之前是否存在字符，如果是，确定目标输入框内存
与目标标识相关联的关联字符，否则，确定目标输入框内不存在与目
关联的关联字符；
定位元素的宽度小于设定宽度，对网页坐标的计算无影响；或者，所述针对
标标识构造的定位元素为通过网页标签封装的作为目标标识的字符。
前的所有字符；
标标识相
所述与目标标识相关联的关联字符包括：目标输入框内且在所述目标标识之
前的所有字符；
所述针对目标标识构造的定位元素为设定的辅助定位元素，所述设定的辅助
本发明中，所述目标标识为目标输入框内的光标；
所述判断目标输入框内是否存在与目标标识相关联的关联字符包括：识别出
输
所述目标输入框内在目标标识之前、且紧邻所述目标标识的字符，判断目标
入框在该识别出的字符之前是否存在字符，如果是，确定目标输入框
目标标识相关联的关联字符，否则，确定目标输入框内不存在
联的关联字符；
定位元素的宽度小于设定宽度，对网页坐标的计算无影响。
内存在与
与目标标识相关
所述与目标标识相关联的关联字符包括：目标输入框内且在所述识别出的字
所述针对目标标识构造的定位元素为通过网页标签封装的所述识别出的字
基于此，本发明中，所述计算单元所述依据目标输入框的网页坐标、所述副
本层的网页坐标、以及定位元素的网页坐标计算所述目标标识的网页坐标包
符。
符之前的所有字符；
括：
识别所述副本层中的定位元素是否为设定的辅助定位元素；
如果是，采用以下公式计算目标标识的网页坐标：X=Xa-Xb+Xc，
Yb+Yc；
Y=Ya-
如果否，采用以下公式计算目标标识的网页坐标：X=Xa-Xb+Xc+Wc，
Y=Ya-Yb+Yc；
其中，X为目标标识的左上角在网页中的横坐标，Y为目标标识的左上角在
网页中的纵坐标，Xa为目标输入框的左上角在网页中的横坐标，Ya为目标
框的左上角在网页中的纵坐标，Xb为副本层的左上角在网页中的横
为副本层的左上角在网页中的纵坐标，Xc为定位元素的左上
标，Wc为定位元素的宽度，Yc为定位元素的左上角在
输入
坐标，Yb
角在网页中的横坐
网页中的纵坐标。
至此，完成图5所示的装置结构描述。
由以上技术方案可以看出，本发明对目标输入框执行用于消除浏览器排版差
页
进一步地，本发明在获取目标输入框内目标标识的网页坐标时，创建一个
副本层，该副本层自身的外观样式、排版样式全部都和目标输入框一样，这
将目标输入框内目标标识之前的所有字符写入至副本层时就能够让这
字符在副本层的排版和目标输入框内的排版相同，并同时将定
层的最后面，依赖于浏览器绘制的副本层、目标输入框、
坐标，完全不受滚动条的影响，保证输入框内字
准确。
异的排版样式处理，这样，就不会出现针对不同浏览器计算的目标标识的网
坐标不同的问题；
样，
些写入的
位元素写入副本
以及定位元素的网页
符或光标的网页坐标计算结果
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本
发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在
本发明保护的范围之内。
发布评论