CN115328324A - 移动端字符输入的方法和装置 - Google Patents
移动端字符输入的方法和装置 Download PDFInfo
- Publication number
- CN115328324A CN115328324A CN202210881461.9A CN202210881461A CN115328324A CN 115328324 A CN115328324 A CN 115328324A CN 202210881461 A CN202210881461 A CN 202210881461A CN 115328324 A CN115328324 A CN 115328324A
- Authority
- CN
- China
- Prior art keywords
- character
- input
- abscissa
- user
- click
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 32
- 238000009877 rendering Methods 0.000 claims abstract description 36
- 238000012544 monitoring process Methods 0.000 claims abstract description 18
- 238000004590 computer program Methods 0.000 claims description 10
- 230000003993 interaction Effects 0.000 abstract description 15
- 238000010586 diagram Methods 0.000 description 15
- 238000004891 communication Methods 0.000 description 7
- 238000005516 engineering process Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 6
- 230000008569 process Effects 0.000 description 5
- 238000012545 processing Methods 0.000 description 5
- 230000000694 effects Effects 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 238000003780 insertion Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 239000000835 fiber Substances 0.000 description 2
- 230000037431 insertion Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- 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/02—Input arrangements using manually operated switches, e.g. using keyboards or dials
- G06F3/023—Arrangements for converting discrete items of information into a coded form, e.g. arrangements for interpreting keyboard generated codes as alphanumeric codes, operand codes or instruction codes
- G06F3/0233—Character input methods
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/14—Tree-structured documents
- G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种移动端字符输入的方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：获取待显示页面的文档对象模型，基于所述文档对象模型中的自定义标签渲染生成字符输入框；使用行内元素标签，对所述字符输入框中字符串的每一位字符进行单独渲染；对渲染后的每一位字符的点击事件进行监听；响应于监听到字符的点击事件，根据用户的点击位置和所述字符的坐标区间确定用户的输入位置；将光标移动至所述输入位置以进行字符输入。该实施方式可以模拟输入的任何场景，保证了字符输入框的灵活性，没有交互死角，支持用户以中间插入的方式输入字符，字符输入方便，交互体验良好。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种移动端字符输入的方法和装置。
背景技术
移动端字符输入框在使用native技术(iso或android)实现时，虽然可根据终端种类选择不同控件实现，但是由于不同操作系统需要独立开发，且需要适配很多机型，故而实现繁琐。目前，多是使用h5(HTML5，超文本5.0)技术也就是移动端web技术，来开发移动端字符输入框以实现字符输入。目前，使用h5技术来实现字符输入有两种方案，方案一是使用html技术的input标签配合移动端原生的输入键盘实现字符输入框，以进行字符输入；方案二是使用自定义标签渲染出输入框样式，再配合自定义的字符键盘来模拟用户输入的过程，将用户的输入内容和输入框的值绑定，达到模拟字符输入和展示的目的。
在实现本发明过程中，发明人发现现有技术中至少存在如下问题：
方案一由于输入框的样式和原生的输入键盘不支持自定义，故而字符输入不够灵活多样；方案二虽然支持自定义设置，但不支持用户以插入的方式在一串字符中间输入字符，仅支持在字符的末尾进行字符输入，字符输入不方便，交互体验不够良好。
发明内容
有鉴于此，本发明实施例提供一种移动端字符输入的方法和装置，能够保证字符输入框的灵活性，没有交互死角，支持用户以中间插入的方式输入字符，字符输入方便，交互体验良好。
为实现上述目的，根据本发明实施例的一个方面，提供了一种移动端字符输入的方法，包括：
获取待显示页面的文档对象模型，基于所述文档对象模型中的自定义标签渲染生成字符输入框；
使用行内元素标签，对所述字符输入框中字符串的每一位字符进行单独渲染；
对渲染后的每一位字符的点击事件进行监听；
响应于监听到字符的点击事件，根据用户的点击位置和所述字符的坐标区间确定用户的输入位置；
将光标移动至所述输入位置以进行字符输入。
可选地，使用行内元素标签，对所述字符输入框中字符串的每一位字符进行单独渲染，包括：将所述字符输入框中的字符串转化为数组；遍历数组中的每一位字符，将每一位字符渲染成一个独立的行内元素标签。
可选地，根据用户的点击位置和所述字符的坐标区间确定用户的输入位置，包括：分别获取用户的点击位置的横坐标和所述字符的横坐标的坐标区间；根据所述点击位置的横坐标和所述字符的横坐标的坐标区间确定用户的输入位置。
可选地，根据所述点击位置的横坐标和所述字符的横坐标的坐标区间确定用户的输入位置，包括：根据所述字符的横坐标的坐标区间得到所述字符的横坐标的中间坐标；将所述点击位置的横坐标和所述字符的横坐标的中间坐标进行比较，若所述点击位置的横坐标小于所述字符的横坐标的中间坐标，则用户的输入位置为所述字符与所述字符的前一字符之间；否则，所述用户的输入位置为所述字符与所述字符的后一字符之间。
根据本发明实施例的另一方面，提供了一种移动端字符输入的装置，包括：
输入框生成模块，用于获取待显示页面的文档对象模型，基于所述文档对象模型中的自定义标签渲染生成字符输入框；
字符渲染模块，用于使用行内元素标签，对所述字符输入框中字符串的每一位字符进行单独渲染；
事件监听模块，用于对渲染后的每一位字符的点击事件进行监听；
位置确定模块，用于响应于监听到字符的点击事件，根据用户的点击位置和所述字符的坐标区间确定用户的输入位置；
字符输入模块，用于将光标移动至所述输入位置以进行字符输入。
可选地，所述字符渲染模块还用于：将所述字符输入框中的字符串转化为数组；遍历数组中的每一位字符，将每一位字符渲染成一个独立的行内元素标签。
可选地，所述位置确定模块还用于：分别获取用户的点击位置的横坐标和所述字符的横坐标的坐标区间；根据所述点击位置的横坐标和所述字符的横坐标的坐标区间确定用户的输入位置。
可选地，所述位置确定模块还用于：根据所述字符的横坐标的坐标区间得到所述字符的横坐标的中间坐标；将所述点击位置的横坐标和所述字符的横坐标的中间坐标进行比较，若所述点击位置的横坐标小于所述字符的横坐标的中间坐标，则用户的输入位置为所述字符与所述字符的前一字符之间；否则，所述用户的输入位置为所述字符与所述字符的后一字符之间。
根据本发明实施例的又一方面，提供了一种移动端字符输入的电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例所提供的移动端字符输入的方法。
根据本发明实施例的再一方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例所提供的移动端字符输入的方法。
上述发明中的一个实施例具有如下优点或有益效果：通过获取待显示页面的文档对象模型，基于文档对象模型中的自定义标签渲染生成字符输入框；使用行内元素标签，对字符输入框中字符串的每一位字符进行单独渲染；对渲染后的每一位字符的点击事件进行监听；响应于监听到字符的点击事件，根据用户的点击位置和字符的坐标区间确定用户的输入位置；将光标移动至输入位置以进行字符输入的技术方案，使得字符输入框一方面支持灵活的自定义，可以模拟输入的任何场景，保证了字符输入框的灵活性；另一方面没有交互死角，支持用户以中间插入的方式输入字符，字符输入方便，交互体验良好。
上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
附图用于更好地理解本发明，不构成对本发明的不当限定。其中：
图1是根据本发明实施例的移动端字符输入的方法的主要步骤示意图；
图2是本发明一个实施例的字符串渲染效果示意图；
图3是本发明一个实施例的输入位置的判断原理示意图；
图4是本发明一个实施例的输入位置示意图；
图5是本发明一个实施例的移动端字符输入的实现流程示意图；
图6是根据本发明实施例的移动端字符输入的装置的主要模块示意图；
图7是本发明实施例可以应用于其中的示例性系统架构图；
图8是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
为了解决现有技术中存在的技术问题，本发明提供了一种移动端字符输入的方法和装置，使得基于h5技术开发的字符输入框一方面支持灵活的自定义，可以模拟输入的任何场景，另一方面没有交互死角，允许用户以插入的方式输入字符，字符输入方便，交互体验良好。
图1是根据本发明实施例的移动端字符输入的方法的主要步骤示意图。如图1所示，根据本发明实施例的移动端字符输入的方法主要包括如下的步骤S101至步骤S105。
步骤S101：获取待显示页面的文档对象模型，基于所述文档对象模型中的自定义标签渲染生成字符输入框。在本发明的实施例中，为了支持灵活自定义的字符输入框，基于h5技术来开发字符输入框，具体地，首先要获取待显示页面的文档对象模型dom模型，然后基于文档对象模型dom模型中的自定义标签来渲染生成字符输入框，其中，该自定义标签例如是自定义的字符输入键盘。在本发明的实施例中，字符例如包括大写英文字符、小写英文字符、数字、特殊字符等等。
步骤S102：使用行内元素标签，对所述字符输入框中字符串的每一位字符进行单独渲染。行内元素就是默认情况下只占自己内容的宽度和高度的空间，无法改变它的高度或者宽度的元素，只能转成块级元素后方可改变宽度和高度。行内元素标签指的是行内元素对应的标签，无法直接设置高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高的标签，在一行中可以存在多个行内元素标签。行内元素标签例如包括span标签、a标签、em标签、strong标签、b标签、i标签、u标签、label标签、br标签，等等。通过使用行内标签对字符进行渲染，即可将一行内的多个字符进行单独渲染。
根据本发明的一个实施例，使用行内元素标签，对字符输入框中字符串的每一位字符进行单独渲染，具体可以包括：将字符输入框中的字符串转化为数组；遍历数组中的每一位字符，将每一位字符渲染成一个独立的行内元素标签。在本发明的实施例中，字符串以数字字符串为例，数字字符串包括数字字符和小数点符号，故而在对数字字符串中的每一位字符进行单独渲染时，是将数字字符串中的每个数字字符和小数点符号均作为一位字符进行单独渲染。图2是本发明一个实施例的字符串渲染效果示意图。如图2所示，其示出了将字符输入框中的数字字符串“323232.33”中的每一位字符进行单独渲染后的效果。其中，对于字符输入框中未输入字符的部分，可将其作为一个单独的字符位进行渲染。
步骤S103：对渲染后的每一位字符的点击事件进行监听。在本发明的实施例中，每一位字符均对应HTML5页面框架中的一个dom对象，通过监听每一位字符的dom对象的touchstart事件，即可监听渲染后的每一位字符的点击事件。通过用户的点击事件可以初步判断用户输入字符的大致位置。
步骤S104：响应于监听到字符的点击事件，根据用户的点击位置和所述字符的坐标区间确定用户的输入位置。通过监听用户的点击事件，可以判断出用户当前点击了哪一位字符(以数字字符串为例，此处的字符包括数字字符和小数点)。之后，需要进一步计算出用户点击意图的输入位置是在当前位数之前还是当前位数之后。其中，若用户点击的字符位为字符输入框中未输入字符的部分，则直接在该字符位插入光标进行字符输入即可。
根据本发明的一个实施例，在根据用户的点击位置和所述字符的坐标区间确定用户的输入位置时，具体可以包括：分别获取用户的点击位置的横坐标和所述字符的横坐标的坐标区间；根据所述点击位置的横坐标和所述字符的横坐标的坐标区间确定用户的输入位置。由于行内元素无需考虑其高度信息，故而可以仅通过对横坐标的比较来确定用户的输入位置。具体地，可以根据用户点击位置的横坐标，和字符的横坐标区间来进行比较，确定用户的输入位置。
在本发明的实施例中，根据所述点击位置的横坐标和所述字符的横坐标的坐标区间确定用户的输入位置，具体可以包括：根据所述字符的横坐标的坐标区间得到所述字符的横坐标的中间坐标；将所述点击位置的横坐标和所述字符的横坐标的中间坐标进行比较，若所述点击位置的横坐标小于所述字符的横坐标的中间坐标，则用户的输入位置为所述字符与所述字符的前一字符之间；否则，所述用户的输入位置为所述字符与所述字符的后一字符之间。通过获取用户点击的字符的横坐标区间，即可得到用户点击字符的宽度和字符的中心坐标，即：字符横坐标的中间坐标。然后，通过将用户点击位置的横坐标和字符的横坐标的中间坐标进行比较可以判断用户点击位置是在字符的左半边还是右半边。若用户点击位置的横坐标小于字符的横坐标的中间坐标，则说明用户点击位置在字符的左半边，判断用户的输入位置在该字符之前，否则判断用户的输入位置在该字符之后。具体地，在获取用户点击位置的横坐标时，可以通过touchstart事件返回的page8属性获取到。对于用户点击的字符的横坐标，即用于点击的字符的dom对象的横坐标，可以通过递归当前点击的dom对象的父对象的横坐标相加得到，其中，根坐标是html对象的横坐标。
图3是本发明一个实施例的输入位置的判断原理示意图。如图3所示，假设监听到的点击事件为用户点击了数字字符2的点击事件，则可根据用户点击位置的横坐标，和数字字符2的横坐标的中间坐标进行比较，确定用户预期输入位置是在数字字符2的前边还是后边。
图4是本发明一个实施例的输入位置示意图。如图4所示，可将每一位字符之间的位置进行编号标识，并将最后一位字符之后的位置作为一整个输入位置进行编号。具体地，若用户的输入位置为小数点之后的两个3之间，则用户的输入位置即为图中的位置4。
步骤S105：将光标移动至所述输入位置以进行字符输入。在得到用户预期的输入位置后，可移动光标到相应的位置并开始输入交互操作。
图5是本发明一个实施例的移动端字符输入的实现流程示意图。如图5所示，在本发明的实施例中，以数字字符串为例，用户在移动端输入字符时，具体交互过程如下：
1、用户在字符输入框中点击某个字符，包括数字字符和小数点；
2、通过监听字符的点击事件确定用户点击的字符；
3、若用户点击位置无字符，则直接在用户点击位置插入光标；
4、若用户点击位置有字符，则根据用户点击位置和用户点击的字符的横坐标区间，判断用户点击位置在该字符的前半部分还是后半部分；
5、若用户点击位置在该字符的前半部分，则在该字符前插入光标；
6、若用户点击位置在该字符的后半部分，则在该字符后插入光标；
7、接收用户输入。
图6是根据本发明实施例的移动端字符输入的装置的主要模块示意图。如图6所示，本发明实施例的移动端字符输入的装置600主要包括输入框生成模块601、字符渲染模块602、事件监听模块603、位置确定模块604和字符输入模块605。
输入框生成模块601，用于获取待显示页面的文档对象模型，基于所述文档对象模型中的自定义标签渲染生成字符输入框；
字符渲染模块602，用于使用行内元素标签，对所述字符输入框中字符串的每一位字符进行单独渲染；
事件监听模块603，用于对渲染后的每一位字符的点击事件进行监听；
位置确定模块604，用于响应于监听到字符的点击事件，根据用户的点击位置和所述字符的坐标区间确定用户的输入位置；
字符输入模块605，用于将光标移动至所述输入位置以进行字符输入。
根据本发明的一个实施例，字符渲染模块602还可以用于：将所述字符输入框中的字符串转化为数组；遍历数组中的每一位字符，将每一位字符渲染成一个独立的行内元素标签。
根据本发明的另一个实施例，位置确定模块604还可以用于：分别获取用户的点击位置的横坐标和所述字符的横坐标的坐标区间；根据所述点击位置的横坐标和所述字符的横坐标的坐标区间确定用户的输入位置。
根据本发明的另一个实施例，位置确定模块604还可以用于：根据所述字符的横坐标的坐标区间得到所述字符的横坐标的中间坐标；将所述点击位置的横坐标和所述字符的横坐标的中间坐标进行比较，若所述点击位置的横坐标小于所述字符的横坐标的中间坐标，则用户的输入位置为所述字符与所述字符的前一字符之间；否则，所述用户的输入位置为所述字符与所述字符的后一字符之间。
根据本发明实施例的技术方案，通过获取待显示页面的文档对象模型，基于文档对象模型中的自定义标签渲染生成字符输入框；使用行内元素标签，对字符输入框中字符串的每一位字符进行单独渲染；对渲染后的每一位字符的点击事件进行监听；响应于监听到字符的点击事件，根据用户的点击位置和字符的坐标区间确定用户的输入位置；将光标移动至输入位置以进行字符输入的技术方案，使得字符输入框一方面支持灵活的自定义，可以模拟输入的任何场景，保证了字符输入框的灵活性；另一方面没有交互死角，支持用户以中间插入的方式输入字符，字符输入方便，交互体验良好。
图7示出了可以应用本发明实施例的移动端字符输入的方法或移动端字符输入的装置的示例性系统架构700。
如图7所示，系统架构700可以包括终端设备701、702、703，网络704和服务器705。网络704用以在终端设备701、702、703和服务器705之间提供通信链路的介质。网络704可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备701、702、703通过网络704与服务器705交互，以接收或发送消息等。终端设备701、702、703上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、支付类应用、即时通信工具、社交平台软件等(仅为示例)。
终端设备701、702、703可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。
服务器705可以是提供各种服务的服务器，例如对用户利用终端设备701、702、703所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的字符输入请求等数据进行获取待显示页面的文档对象模型，基于文档对象模型中的自定义标签渲染生成字符输入框；使用行内元素标签，对字符输入框中字符串的每一位字符进行单独渲染；对渲染后的每一位字符的点击事件进行监听；响应于监听到字符的点击事件，根据用户的点击位置和所述字符的坐标区间确定用户的输入位置；将光标移动至所述输入位置以进行字符输入等处理，并将处理结果(例如字符输入结果--仅为示例)反馈给终端设备。
需要说明的是，本发明实施例所提供的移动端字符输入的方法一般由服务器705执行，相应地，移动端字符输入的装置一般设置于服务器705中。
应该理解，图7中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
下面参考图8，其示出了适于用来实现本发明实施例的终端设备或服务器的计算机系统800的结构示意图。图8示出的终端设备或服务器仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
如图8所示，计算机系统800包括中央处理单元(CPU)801，其可以根据存储在只读存储器(ROM)802中的程序或者从存储部分808加载到随机访问存储器(RAM)803中的程序而执行各种适当的动作和处理。在RAM 803中，还存储有系统800操作所需的各种程序和数据。CPU 801、ROM 802以及RAM 803通过总线804彼此相连。输入/输出(I/O)接口805也连接至总线804。
以下部件连接至I/O接口805：包括键盘、鼠标等的输入部分806；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分807；包括硬盘等的存储部分808；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分809。通信部分809经由诸如因特网的网络执行通信处理。驱动器810也根据需要连接至I/O接口805。可拆卸介质811，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器810上，以便于从其上读出的计算机程序根据需要被安装入存储部分808。
特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分809从网络上被下载和安装，和/或从可拆卸介质811被安装。在该计算机程序被中央处理单元(CPU)801执行时，执行本发明的系统中限定的上述功能。
需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。
附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本发明实施例中所涉及到的单元或模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元或模块也可以设置在处理器中，例如，可以描述为：一种处理器包括输入框生成模块、字符渲染模块、事件监听模块、位置确定模块和字符输入模块。其中，这些单元或模块的名称在某种情况下并不构成对该单元或模块本身的限定，例如，字符渲染模块还可以被描述为“用户使用行内元素标签，对字符输入框中字符串的每一位字符进行单独渲染的模块”。
作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：获取待显示页面的文档对象模型，基于所述文档对象模型中的自定义标签渲染生成字符输入框；使用行内元素标签，对字符输入框中字符串的每一位字符进行单独渲染；对渲染后的每一位字符的点击事件进行监听；响应于监听到字符的点击事件，根据用户的点击位置和所述字符的坐标区间确定用户的输入位置；将光标移动至所述输入位置以进行字符输入。
根据本发明实施例的技术方案，通过获取待显示页面的文档对象模型，基于文档对象模型中的自定义标签渲染生成字符输入框；使用行内元素标签，对字符输入框中字符串的每一位字符进行单独渲染；对渲染后的每一位字符的点击事件进行监听；响应于监听到字符的点击事件，根据用户的点击位置和字符的坐标区间确定用户的输入位置；将光标移动至输入位置以进行字符输入的技术方案，使得字符输入框一方面支持灵活的自定义，可以模拟输入的任何场景，保证了字符输入框的灵活性；另一方面没有交互死角，支持用户以中间插入的方式输入字符，字符输入方便，交互体验良好。
上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。
Claims (10)
1.一种移动端字符输入的方法，其特征在于，包括：
获取待显示页面的文档对象模型，基于所述文档对象模型中的自定义标签渲染生成字符输入框；
使用行内元素标签，对所述字符输入框中字符串的每一位字符进行单独渲染；
对渲染后的每一位字符的点击事件进行监听；
响应于监听到字符的点击事件，根据用户的点击位置和所述字符的坐标区间确定用户的输入位置；
将光标移动至所述输入位置以进行字符输入。
2.根据权利要求1所述的方法，其特征在于，使用行内元素标签，对所述字符输入框中字符串的每一位字符进行单独渲染，包括：
将所述字符输入框中的字符串转化为数组；
遍历数组中的每一位字符，将每一位字符渲染成一个独立的行内元素标签。
3.根据权利要求1所述的方法，其特征在于，根据用户的点击位置和所述字符的坐标区间确定用户的输入位置，包括：
分别获取用户的点击位置的横坐标和所述字符的横坐标的坐标区间；
根据所述点击位置的横坐标和所述字符的横坐标的坐标区间确定用户的输入位置。
4.根据权利要求3所述的方法，其特征在于，根据所述点击位置的横坐标和所述字符的横坐标的坐标区间确定用户的输入位置，包括：
根据所述字符的横坐标的坐标区间得到所述字符的横坐标的中间坐标；
将所述点击位置的横坐标和所述字符的横坐标的中间坐标进行比较，若所述点击位置的横坐标小于所述字符的横坐标的中间坐标，则用户的输入位置为所述字符与所述字符的前一字符之间；否则，所述用户的输入位置为所述字符与所述字符的后一字符之间。
5.一种移动端字符输入的装置，其特征在于，包括：
输入框生成模块，用于获取待显示页面的文档对象模型，基于所述文档对象模型中的自定义标签渲染生成字符输入框；
字符渲染模块，用于使用行内元素标签，对所述字符输入框中字符串的每一位字符进行单独渲染；
事件监听模块，用于对渲染后的每一位字符的点击事件进行监听；
位置确定模块，用于响应于监听到字符的点击事件，根据用户的点击位置和所述字符的坐标区间确定用户的输入位置；
字符输入模块，用于将光标移动至所述输入位置以进行字符输入。
6.根据权利要求5所述的装置，其特征在于，所述字符渲染模块还用于：
将所述字符输入框中的字符串转化为数组；
遍历数组中的每一位字符，将每一位字符渲染成一个独立的行内元素标签。
7.根据权利要求5所述的装置，其特征在于，所述位置确定模块还用于：
分别获取用户的点击位置的横坐标和所述字符的横坐标的坐标区间；
根据所述点击位置的横坐标和所述字符的横坐标的坐标区间确定用户的输入位置。
8.根据权利要求7所述的装置，其特征在于，所述位置确定模块还用于：
根据所述字符的横坐标的坐标区间得到所述字符的横坐标的中间坐标；
将所述点击位置的横坐标和所述字符的横坐标的中间坐标进行比较，若所述点击位置的横坐标小于所述字符的横坐标的中间坐标，则用户的输入位置为所述字符与所述字符的前一字符之间；否则，所述用户的输入位置为所述字符与所述字符的后一字符之间。
9.一种移动端字符输入的电子设备，其特征在于，包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序，
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-4中任一所述的方法。
10.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-4中任一所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210881461.9A CN115328324A (zh) | 2022-07-26 | 2022-07-26 | 移动端字符输入的方法和装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210881461.9A CN115328324A (zh) | 2022-07-26 | 2022-07-26 | 移动端字符输入的方法和装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115328324A true CN115328324A (zh) | 2022-11-11 |
Family
ID=83920263
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210881461.9A Pending CN115328324A (zh) | 2022-07-26 | 2022-07-26 | 移动端字符输入的方法和装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115328324A (zh) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110252304A1 (en) * | 2010-04-12 | 2011-10-13 | Google Inc. | Rich Browser-Based Word Processor |
| US20170010805A1 (en) * | 2014-01-24 | 2017-01-12 | Huawei Device Co., Ltd. | Character Input Method and Electronic Device |
| US20170249293A1 (en) * | 2016-02-29 | 2017-08-31 | Myscript | Method for inserting characters in a character string and the corresponding digital service |
| CN107885414A (zh) * | 2016-09-30 | 2018-04-06 | 阿里巴巴集团控股有限公司 | 一种控制光标定位的方法及装置 |
-
2022
- 2022-07-26 CN CN202210881461.9A patent/CN115328324A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110252304A1 (en) * | 2010-04-12 | 2011-10-13 | Google Inc. | Rich Browser-Based Word Processor |
| US20170010805A1 (en) * | 2014-01-24 | 2017-01-12 | Huawei Device Co., Ltd. | Character Input Method and Electronic Device |
| US20170249293A1 (en) * | 2016-02-29 | 2017-08-31 | Myscript | Method for inserting characters in a character string and the corresponding digital service |
| CN107885414A (zh) * | 2016-09-30 | 2018-04-06 | 阿里巴巴集团控股有限公司 | 一种控制光标定位的方法及装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112100550A (zh) | 一种页面构建方法和装置 | |
| CN113031946B (zh) | 一种渲染页面组件的方法和装置 | |
| CN113382083B (zh) | 一种网页截图方法和装置 | |
| CN111294395A (zh) | 一种终端页面传输方法、装置、介质和电子设备 | |
| CN113590974B (zh) | 推荐页面配置方法、装置、电子设备和计算机可读介质 | |
| CN113360106B (zh) | 一种网页打印方法和装置 | |
| CN112486482A (zh) | 一种页面展示方法和装置 | |
| CN110941401A (zh) | 一种打印方法和装置 | |
| CN110647327B (zh) | 基于卡片的用户界面动态控制的方法和装置 | |
| CN113220381A (zh) | 一种点击数据展示方法和装置 | |
| CN113282852A (zh) | 编辑网页的方法和装置 | |
| CN112256254A (zh) | 一种生成布局代码的方法和装置 | |
| CN108664511B (zh) | 获取网页信息方法和装置 | |
| CN113342450B (zh) | 页面处理的方法、装置、电子设备及计算机可读介质 | |
| CN114816382A (zh) | 一种处理页面的方法和装置 | |
| CN115328324A (zh) | 移动端字符输入的方法和装置 | |
| CN114138717A (zh) | 一种富文本信息的发布方法及相关装置 | |
| CN113656041A (zh) | 数据处理方法、装置、设备及存储介质 | |
| CN110908550B (zh) | 光标悬停状态下的操作处理方法和装置 | |
| CN113781608A (zh) | 一种动画编辑方法及装置 | |
| CN111488537A (zh) | 一种页面展示的方法和装置 | |
| CN110796137A (zh) | 一种识别图像的方法和装置 | |
| CN112579080A (zh) | 一种生成用户界面代码的方法和装置 | |
| CN110874302A (zh) | 一种埋点配置信息的确定方法和装置 | |
| CN117708463A (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 |