(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210753768.0 (22)申请日 2022.06.28 (71)申请人 北京彩漩科技有限公司 地址 100096 北京市海淀区建材城 翡丽华 庭13号楼 2层04 (72)发明人 唐韬　 (74)专利代理 机构 北京华夏泰和知识产权代理 有限公司 1 1662 专利代理师 曾军 (51)Int.Cl. G06F 9/451(2018.01) G06F 16/958(2019.01) (54)发明名称 单行输入框的宽度调节方法、 装置、 电子设 备和存储介质 (57)摘要 本申请提供了单行输入框的宽度调节方法、 装置、 电子设备和存储介质， 所述方法包括： 将浏 览器中单行输入框的输入内容镜像替换为空对 象， 其中， 所述空对象指示所述输入内容； 通过所 述空对象的接口获取所述空对象的目标宽度， 其 中， 所述目标宽度与所述输入内容的字符长度相 同； 根据所述目标宽度， 通过CSS动态调节所述单 行输入框的宽度， 以使所述单行输入框的宽度适 配所述输入内容。 本申请提高用户体验。 权利要求书2页 说明书7页 附图1页 CN 115328591 A 2022.11.11 CN 115328591 A 1.一种单 行输入框的宽度调节方法， 其特 征在于， 所述方法包括： 将浏览器中单行输入框的输入内容镜像替换为空对象， 其中， 所述空对象指示所述输 入内容； 通过所述空对象的接口获取所述空对象的目标宽度， 其中， 所述目标宽度与所述输入 内容的字符长度相同； 根据所述目标宽度， 通过CSS动态调节所述单行输入框的宽度， 以使所述单行输入框的 宽度适配所述输入内容。 2.根据权利要求1所述的方法， 其特征在于， 将浏 览器中单行输入框的输入内容镜像替 换为空对象包括： 通过document.createElement创建页面元 素， 其中， 所述页面元 素指示所述空对象； 通过输入控件的onChange注册事件， 获取浏览器中单行输入框的输入内容， 其中， 所述 onChange注册事件在输入内容每次发生变更后会触发， 且将输入内容传入注 册的事件； 将所述输入内容赋值给所述页面元素， 其中， 所述页面元素的尺寸在赋值成功后会被 新的输入内容撑开从而发生变化。 3.根据权利要求2所述的方法， 其特征在于， 通过所述空对象的接口获取所述空对象的 目标宽度包括： 通过getBoundingClientRect获取所述页面元素的最新尺寸， 其中， 所述最新尺寸指示 所述空对象的目标宽度。 4.根据权利要求1所述的方法， 其特征在于， 根据所述目标宽度， 通过CSS动态调 节所述 单行输入框的宽度包括： 通过CSS动态调节所述单行输入框的宽度至所述目标宽度， 以使所述单行输入框的宽 度与所述输入内容的字符长度相同。 5.根据权利要求1所述的方法， 其特征在于， 根据所述目标宽度， 通过CSS动态调 节所述 单行输入框的宽度包括： 获取所述空对象的预设最小宽度； 在所述目标宽度小于等于所述预设最小宽度的情况下， 保持所述单行输入框的宽度不 变； 在所述目标宽度大于所述预设最小宽度的情况下， 通过CSS动态扩展所述单行输入框 的宽度， 使所述单 行输入框的宽度适配所述输入内容。 6.根据权利要求1、 4和5任一所述的方法， 其特征在于， 根据所述目标宽度， 通过CSS动 态调节所述单 行输入框的宽度包括： 获取所述空对象的预设最大宽度； 在检测到所述空对象的目标宽度超出所述预设最大宽度的情况下， 通过CSS按照所述 预设最大宽度调节所述单行输入框的宽度， 以使 所述单行输入框能够以预设最大宽度显示 所述输入内容。 7.一种单 行输入框的宽度调节装置， 其特 征在于， 所述装置包括： 替换模块， 用于将浏 览器中单行输入框的输入内容镜像替换为空对象， 其中， 所述空对 象指示所述输入内容； 获取模块， 用于通过所述空对象的接口获取所述空对象的目标宽度， 其中， 所述目标宽权　利　要　求　书 1/2 页 2 CN 115328591 A 2度与所述输入内容的字符长度相同； 调节模块， 用于根据所述目标宽度， 通过CSS动态调节所述单行输入框的宽度， 以使所 述单行输入框的宽度适配所述输入内容。 8.根据权利要求7 所述的装置， 其特 征在于， 所述 替换模块用于： 通过document.createElement创建页面元 素， 其中， 所述页面元 素指示所述空对象； 通过输入控件的onChange注册事件， 获取浏览器中单行输入框的输入内容， 其中， 所述 onChange注册事件在输入内容每次发生变更后会触发， 且将输入内容传入注 册的事件； 将所述输入内容赋值给所述页面元素， 其中， 所述页面元素的尺寸在赋值成功后会被 新的输入内容撑开从而发生变化。 9.一种电子设备， 其特征在于， 包括处理器、 通信接口、 存储器和通信总线， 其中， 处理 器， 通信接口， 存 储器通过通信总线完成相互间的通信； 存储器， 用于存放计算机程序； 处理器， 用于执 行存储器上所存放的程序时， 实现权利要求1 ‑6任一所述的方法步骤。 10.一种计算机可读存储介质， 其特征在于， 所述计算机可读存储介质内存储有计算机 程序， 所述计算机程序被处 理器执行时实现权利要求1 ‑6任一所述的方法步骤。权　利　要　求　书 2/2 页 3 CN 115328591 A 3