使用上下箭头时，输入数字值不会保持

Question

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v126 可复制演示链接 https://codepen.io/aswinkumar863/pen/VwJaVYG 描述一下那个虫子 如何复现这个漏洞？打开[演示]（https://codepen.io/aswinkumar863/pen/VwJaVYG）。点击编辑正文中的“点击我”部分。导航到Style Manager并选择General > Top。在输入框中输入任意数字，但不点击外部。点击上或下箭头。 注意： 此行为仅在输入字段未被点击时观察到。数字特征也受此问题影响。 预期的行为是什么？ 输入数字应与当前输入的值递增或递减。 目前的行为是什么？ 输入数不是从输入值上下调，而是从模型值上下调。 行为准则 [X] 我同意遵守本项目的行为准则

GJS Helper · Accepted Answer

你准确指出了GrapesJS中的一个bug，就是风格管理器和特性管理器中的input type="number"字段在使用上下箭头时，无法正确保留手动输入的数值，除非先模糊输入。这导致箭头是从模型最后保存的值开始增减，而不是输入字段当前显示的值。 根本原因 根本原因在于GrapesJS的事件处理机制，PropertyNumberView（样式管理器属性）和TraitNumberView（组件特征）。这些视图通常监听输入字段上的change事件以更新底层GrapesJS模型。change事件在输入失去焦点（模糊）或用户按下回车时触发。 然而，当用户在数字输入中输入新值并立即点击上下箭头时，change事件尚未触发。处理箭头点击的onArrowUp和onArrowDown方法直接从GrapesJS模型读取该值（例如this.model.get('value')），以确定递增或递减的起点。由于模型未更新手动输入的值，它使用过时的旧值，实际上忽略了用户的输入。 解决方案：覆盖数字类型视图 最有效的解决方案是覆盖PropertyManager（样式管理器）和 TraitManager的默认 n...

使用上下箭头时，输入数字值不会保持

问题

GrapesJS 版本

你用的是什么浏览器？

可复制演示链接

描述一下那个虫子

行为准则

回答（1）

相关问答

Couldnt Resize image

Style click state bug in every element

当我想添加填充时出现JavaScript错误

Style manager does not accurately reflect inherited color

与此问题匹配的付费插件

相关教程

Introducing Search on GJS.Market

如何在2026年用 GrapesJS 构建AI驱动的页面构建器

2026年构建一个SaaS页面构建器需要多少钱？

浏览插件分类