CN108563486B - 一种光标控制方法和装置 - Google Patents
一种光标控制方法和装置 Download PDFInfo
- Publication number
- CN108563486B CN108563486B CN201810388110.8A CN201810388110A CN108563486B CN 108563486 B CN108563486 B CN 108563486B CN 201810388110 A CN201810388110 A CN 201810388110A CN 108563486 B CN108563486 B CN 108563486B
- Authority
- CN
- China
- Prior art keywords
- cursor
- input
- attribute
- dom
- activeelement
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
Abstract
本发明公开了一种光标控制方法和装置,包括:当选择对象为输入框时,判断浏览器是否支持H5的DOM activeElement属性;若浏览器支持H5的DOM activeElement属性,则调用DOM activeElement属性,并将选择区域的起始位置和结束位置设置为相同,以在所述输入框中显示光标;若浏览器不支持H5的DOM activeElement属性,则调用Range对象,并将文档连续范围的起始位置和结束位置设置为相同,以在所述输入框中显示光标。解决了现有技术没有设定用户的光标从而造成用户无法明确内容输入位置的技术问题。
Description
技术领域
本发明涉及计算机技术领域,尤其涉及一种光标控制方法和装置。
背景技术
目前,我们常会遇到一些长串数字的输入场景,如银行卡,身份证等输入,为了便于用户准确输入,如图1所示,往往会做一些按位数的输入隔断,却没有很好针对输入光标问题做一个控制,例如:没有设定用户的光标,在输入框中无法显示光标,从而使得用户无法明确内容输入位置。
发明内容
本发明提供了一种光标控制方法和装置,解决了现有技术没有设定用户的光标从而造成用户无法明确内容输入位置的技术问题。
本发明提供了一种光标控制方法,包括:
当选择对象为输入框时,判断浏览器是否支持H5的DOM activeElement属性;
若浏览器支持H5的DOM activeElement属性,则调用DOM activeElement属性,并将选择区域的起始位置和结束位置设置为相同,以在所述输入框中显示光标;
若浏览器不支持H5的DOM activeElement属性,则调用Range对象,并将文档连续范围的起始位置和结束位置设置为相同,以在所述输入框中显示光标。
优选地,
所述的光标控制方法,还包括:
获取用户的输入位置并将光标显示在所述输入位置。
优选地,
所述的光标控制方法,还包括:
记录光标在所述输入框中的显示位置;
当所述显示位置插入一个字符后,控制光标从所述显示位置向后移动一个字符。
优选地,
所述的光标控制方法,还包括:
判断用户在浏览器中的选择对象是否为输入框。
本发明提供了一种光标控制装置,包括:
第一判断单元,用于当选择对象为输入框时,判断浏览器是否支持H5的DOMactiveElement属性;
第一调用单元,用于当浏览器支持H5的DOM activeElement属性时,调用DOMactiveElement属性,并将选择区域的起始位置和结束位置设置为相同,以在所述输入框中显示光标;
第二调用单元,用于当浏览器不支持H5的DOM activeElement属性时,调用Range对象,并将文档连续范围的起始位置和结束位置设置为相同,以在所述输入框中显示光标。
优选地,
所述的光标控制装置,还包括:
光标控制单元,用于获取用户的输入位置并将光标显示在所述输入位置。
优选地,
所述的光标控制装置,还包括:记录单元;
所述记录单元,用于记录光标在所述输入框中的显示位置;
所述光标控制单元还用于当所述显示位置插入一个字符后,控制光标从所述显示位置向后移动一个字符。
优选地,
所述的光标控制装置,还包括:
第二判断单元,用于判断用户在浏览器中的选择对象是否为输入框。
从以上技术方案可以看出,本发明具有以下优点:
当选择对象为输入框时,判断浏览器是否支持H5的DOM activeElement属性;若浏览器支持H5的DOM activeElement属性,则调用DOM activeElement属性,并将选择区域的起始位置和结束位置设置为相同,以在输入框中显示光标;若浏览器不支持H5的DOMactiveElement属性,则调用Range对象,并将文档连续范围的起始位置和结束位置设置为相同,以在输入框中显示光标;该方法具有很好的兼容性,无论浏览器是否支持H5的DOMactiveElement属性,都可以实现在输入框中显示相应的光标,使得用户可以直观地看到内容输入位置,解决了现有技术没有设定用户的光标从而造成用户无法明确内容输入位置的技术问题。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其它的附图。
图1为现有技术中在输入框中设置输入隔断的示意图;
图2为本发明提供的一种光标控制方法的第一实施例的流程示意图;
图3为本发明提供的一种光标控制方法的第二实施例的流程示意图;
图4为本发明提供的一种光标控制装置的第一实施例的结构示意图;
图5为本发明提供的一种光标控制装置的第二实施例的结构示意图。
具体实施方式
本发明实施例提供了一种光标控制方法和装置,解决了现有技术没有设定用户的光标从而造成用户无法明确内容输入位置的技术问题。
发明人在研究中发现,现在技术之所以在输入框中设置相应的输入隔断,是因为JS没有提供控制光标的统一的调用API,使得前端工程师很难实现光标的显示与控制,而且浏览器的差异也增加了统一控制光标的难度,因此通过本发明实现了光标在浏览器输入框中的显示,并且具有很好的兼容性,抹平了浏览器的差异,为光标控制提供了统一的调用API。
为使得本发明的发明目的、特征、优点能够更加的明显和易懂,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,下面所描述的实施例仅仅是本发明一部分实施例,而非全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例,都属于本发明保护的范围。
请参阅图2,本发明提供的一种光标控制方法的第一实施例的流程示意图。
本发明提供了一种光标控制方法的第一实施例,包括:
101,当选择对象为输入框时,判断浏览器是否支持H5的DOM activeElement属性。
需要说明的是,DOM activeElement属性是H5的一种属性,属于现有技术,在此不作详述。
102,若浏览器支持H5的DOM activeElement属性,则调用DOM activeElement属性,并将选择区域的起始位置和结束位置设置为相同,以在输入框中显示光标。
在DOM activeElement属性中,selectionStart和selectionEnd分别代表选择区域的起始位置和结束位置,而将选择区域的起始位置和结束位置都设置为相同,则可以实现在某个位置显示光标。
103,若浏览器不支持H5的DOM activeElement属性,则调用Range对象,并将文档连续范围的起始位置和结束位置设置为相同,以在输入框中显示光标。
因为有的浏览器不支持H5的DOM activeElement属性,例如低版本的IE,此时需要调用Range对象,Range对象代表文档连续范围,只要将文档连续范围的起始位置和结束位置设为相同,便可以实现在不支持DOM activeElement属性的浏览器的输入框中显示光标的功能。
请参阅图3,本发明提供的一种光标控制方法的第二实施例的流程示意图。
本发明提供了一种光标控制方法的第二实施例,包括:
201,判断用户在浏览器中的选择对象是否为输入框。
因为在浏览器中,用户的选择对象有多种,例如可以为按钮,可以为输入框,可以为图片,还可以为文字。
202,当选择对象为输入框时,判断浏览器是否支持H5的DOM activeElement属性。
步骤202与本申请第一实施例中步骤101的内容相同,具体描述可以参见第一实施例步骤101的内容,在此不再赘述。
203,若浏览器支持H5的DOM activeElement属性,则调用DOM activeElement属性,并将选择区域的起始位置和结束位置设置为相同,以在输入框中显示光标。
步骤203与本申请第一实施例中步骤102的内容相同,具体描述可以参见第一实施例步骤102的内容,在此不再赘述。
204,若浏览器不支持H5的DOM activeElement属性,则调用Range对象,并将文档连续范围的起始位置和结束位置设置为相同,以在输入框中显示光标。
步骤204与本申请第一实施例中步骤103的内容相同,具体描述可以参见第一实施例步骤103的内容,在此不再赘述。
205,获取用户的输入位置并将光标显示在输入位置。
需要说明的是,终端不同,输入位置便不同;例如,当终端为固定终端时,输入位置可以是用户鼠标的点击位置;当终端为触摸屏的终端时,输入位置也可以是用户触摸屏幕的位置。
在本实施例中,用户可以直接在输入错误的位置对已经输入的内容进行修改,或在已输入内容的中间插入新的内容,从而解决了没有设置用户光标或设置的用户光标只默认显示在已输入内容额末尾造成的只能将已输入内容删除至输入错误的位置进行修改的技术问题。
另外,需要说明的是,当用户选择的对象为输入框时,光标会显示在输入框中;而光标显示后,用户会根据自己需要调整输入位置,因此步骤205需要在步骤203或步骤204之后进行。
206,记录光标在输入框中的显示位置。
207,当显示位置插入一个字符后,控制光标从显示位置向后移动一个字符。
在本实施例中,当显示位置插入一个字符后,光标会向后移动一个字符,从而避免了在显示位置插入一个字符后自动跳到输入内容末尾的情况。
例如,当输入框中存在1234四个字符时,用户需要在2和3之间依次插入数字5和6,当插入5后,输入框中的输入内容变成12534,在本实施例中,光标会停留在数字5后面,以避免在输入数字5后光标自动跳到数字4的后面,从而更方便用户在输入框中灵活输入内容。
请参阅图4,本发明提供的一种光标控制装置的第一实施例的结构示意图。
本发明提供了一种光标控制装置的第一实施例,包括:
第一判断单元301,用于当选择对象为输入框时,判断浏览器是否支持H5的DOMactiveElement属性。
第一调用单元302,用于当浏览器支持H5的DOM activeElement属性时,调用DOMactiveElement属性,并将选择区域的起始位置和结束位置设置为相同,以在输入框中显示光标。
第二调用单元303,用于当浏览器不支持H5的DOM activeElement属性时,调用Range对象,并将文档连续范围的起始位置和结束位置设置为相同,以在输入框中显示光标。
请参阅图5,本发明提供的一种光标控制装置的第二实施例的结构示意图。
第二判断单元401,用于判断用户在浏览器中的选择对象是否为输入框。
第一判断单元402,用于当选择对象为输入框时,判断浏览器是否支持H5的DOMactiveElement属性。
第一调用单元403,用于当浏览器支持H5的DOM activeElement属性时,调用DOMactiveElement属性,并将选择区域的起始位置和结束位置设置为相同,以在输入框中显示光标。
第二调用单元404,用于当浏览器不支持H5的DOM activeElement属性时,调用Range对象,并将文档连续范围的起始位置和结束位置设置为相同,以在输入框中显示光标。
光标控制单元405,用于获取用户的输入位置并将光标显示在输入位置。
记录单元406,用于记录光标在输入框中的显示位置。
光标控制单元405还用于当显示位置插入一个字符后,控制光标从显示位置向后移动一个字符。
以上所述,以上实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。
Claims (2)
1.一种光标控制方法,其特征在于,包括:
判断用户在浏览器中的选择对象是否为输入框;
当选择对象为输入框时,判断浏览器是否支持H5的DOM activeElement属性;
若浏览器支持H5的DOM activeElement属性,则通过统一的调用API调用DOMactiveElement属性,并将选择区域的起始位置和结束位置设置为相同,以在所述输入框中显示光标;
若浏览器不支持H5的DOM activeElement属性,则通过统一的调用API调用Range对象,并将文档连续范围的起始位置和结束位置设置为相同,以在所述输入框中显示光标;
获取用户的输入位置并将光标显示在所述输入位置;所述输入位置包括用户鼠标的点击位置或用户触摸屏幕的位置;
记录光标在所述输入框中的显示位置;
当所述显示位置插入一个字符后,控制光标从所述显示位置向后移动一个字符。
2.一种光标控制装置,其特征在于,包括:
第二判断单元,用于判断用户在浏览器中的选择对象是否为输入框;
第一判断单元,用于当选择对象为输入框时,判断浏览器是否支持H5的DOMactiveElement属性;
第一调用单元,用于当浏览器支持H5的DOM activeElement属性时,通过统一的调用API调用DOM activeElement属性,并将选择区域的起始位置和结束位置设置为相同,以在所述输入框中显示光标;
第二调用单元,用于当浏览器不支持H5的DOM activeElement属性时,通过统一的调用API调用Range对象,并将文档连续范围的起始位置和结束位置设置为相同,以在所述输入框中显示光标;
光标控制单元,用于获取用户的输入位置并将光标显示在所述输入位置;所述输入位置包括用户鼠标的点击位置或用户触摸屏幕的位置;
记录单元,用于记录光标在所述输入框中的显示位置;
所述光标控制单元还用于当所述显示位置插入一个字符后,控制光标从所述显示位置向后移动一个字符。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810388110.8A CN108563486B (zh) | 2018-04-26 | 2018-04-26 | 一种光标控制方法和装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810388110.8A CN108563486B (zh) | 2018-04-26 | 2018-04-26 | 一种光标控制方法和装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN108563486A CN108563486A (zh) | 2018-09-21 |
CN108563486B true CN108563486B (zh) | 2022-02-25 |
Family
ID=63536939
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201810388110.8A Active CN108563486B (zh) | 2018-04-26 | 2018-04-26 | 一种光标控制方法和装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN108563486B (zh) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110244895B (zh) * | 2019-06-20 | 2021-03-30 | 北京字节跳动网络技术有限公司 | 控制输入法横幅位置的方法、装置、移动终端、存储介质 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101763218A (zh) * | 2010-01-06 | 2010-06-30 | 广东欧珀移动通信有限公司 | 一种手持设备输入方法 |
CN103440090A (zh) * | 2013-07-31 | 2013-12-11 | 贝壳网际(北京)安全技术有限公司 | 光标控制方法、装置和用户终端 |
CN103777858A (zh) * | 2012-10-25 | 2014-05-07 | 深圳市金蝶中间件有限公司 | 文本框显示方法和装置 |
Family Cites Families (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102651023B (zh) * | 2012-03-31 | 2015-01-07 | 北京奇虎科技有限公司 | 一种对输入数据的控制方法和装置 |
CN103513908B (zh) * | 2012-06-29 | 2017-03-29 | 国际商业机器公司 | 用于在触摸屏上控制光标的方法和装置 |
-
2018
- 2018-04-26 CN CN201810388110.8A patent/CN108563486B/zh active Active
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101763218A (zh) * | 2010-01-06 | 2010-06-30 | 广东欧珀移动通信有限公司 | 一种手持设备输入方法 |
CN103777858A (zh) * | 2012-10-25 | 2014-05-07 | 深圳市金蝶中间件有限公司 | 文本框显示方法和装置 |
CN103440090A (zh) * | 2013-07-31 | 2013-12-11 | 贝壳网际(北京)安全技术有限公司 | 光标控制方法、装置和用户终端 |
Non-Patent Citations (2)
Title |
---|
"js document.activeElement 获得焦点的元素";Ajanuw;《https://www.cnblogs.com/ajanuw/p/8005871.html》;20171208;第1页 * |
"JS获取文本框焦点光标位置、选中起始位置、终止位置、选择内容";itdragons;《(https://blog.csdn.net/itdragons/article/details/52186058?from=singlemessage&isappinstalled=0》;20160811;第2页 * |
Also Published As
Publication number | Publication date |
---|---|
CN108563486A (zh) | 2018-09-21 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US11119627B2 (en) | Information display method, device, apparatus and storage medium | |
CN108345481A (zh) | 一种页面显示方法、装置、客户端及服务器 | |
EP2778958A1 (en) | Web page display method and system | |
EP2874054B1 (en) | Application text adjusting method, device, and terminal | |
CN106055197A (zh) | 一种应用图标展示方法及终端 | |
WO2015043442A1 (en) | Method, device and mobile terminal for text-to-speech processing | |
CN104820589A (zh) | 一种动态适配网页的方法及其装置 | |
WO2018176652A1 (zh) | 一种数据显示方法、装置及电子设备 | |
CN105607800A (zh) | 一种终端屏幕输入显示的方法及装置 | |
CN108563486B (zh) | 一种光标控制方法和装置 | |
CN114579912A (zh) | 页面布局方法、装置、设备及介质 | |
TW201344557A (zh) | 自動控制顯示螢幕密度的設備及方法 | |
KR20180122837A (ko) | 웹 브라우저 제공 방법, 장치 및 컴퓨터 프로그램 | |
JP6924544B2 (ja) | 漫画データ表示システム、方法及びプログラム | |
CN107479807B (zh) | 一种iop平台表格列的显示隐藏方法 | |
US20150277747A1 (en) | Touch Page Control Method and System | |
CN105487801B (zh) | 一种进度条调节方法及移动终端 | |
CN113434073A (zh) | 活动窗口的控制方法、装置、电子设备及可读存储介质 | |
CN112908327A (zh) | 应用程序的语音控制方法、装置、设备和存储介质 | |
CN111596828A (zh) | cookie同步方法、装置及计算机可读存储介质 | |
CN110554821A (zh) | 一种用于查询条件筛选的悬浮框的显示方法、系统及设备 | |
CN106095734B (zh) | 一种文本显示方法及装置 | |
CN112749528A (zh) | 文本处理方法、装置、电子设备及计算机可读存储介质 | |
KR20160015764A (ko) | 클라이언트 기반의 전자책 제공방법 및 컴퓨터 프로그램, 그 기록매체 | |
CN111125578B (zh) | 页面显示方法、页面显示装置、存储介质和电子设备 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |