请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

lovert

银牌会员

45

主题

509

帖子

2648

积分

银牌会员

积分
2648
lovert
银牌会员   /  发表于:2025-1-18 22:12  /   查看:257  /  回复:6
组件功能:在输入框插入自己提前预设好的字符串,提高输入效率。
录制_2025_01_18_22_11_03_186.gif365418700.png


步骤:
1.新建一个组件:命名为插入预设值
image.png134203185.png
2.删除其他单元格,只保留一个A1单元格
image.png133598937.png
image.png166862792.png
3.将单元格设置成按钮,按钮样式根据自己喜好设置,我这里省略了
image.png371249694.png
4.在单元格属性中绑定单元格的值
image.png949605712.png
5.在组件页面设置中编辑页面加载时的命令
image.png968458251.png
6.添加JavaScript命令:加入下面代码

  1. window.activeInput = null;

  2. // 监听所有输入框的焦点事件
  3. document.querySelectorAll('input, textarea').forEach(input => {
  4.     input.addEventListener('focus', function() {
  5.         window.activeInput = this; // 更新当前焦点所在的输入框
  6.     });
  7. });
复制代码

image.png230127562.png
7.选中组件单元格A1编辑命令
image.png502794494.png
8.添加一个设置变量命令
image.png511828002.png
9.再添加一个JavaScript命令,添加如下代码

  1. if (window.activeInput) {
  2.         // 获取按钮上的文字
  3.         const buttonText =Forguncy.CommandHelper.getVariableValue("chavalue");

  4.         // 获取当前输入框的光标位置
  5.         const startPos = activeInput.selectionStart;
  6.         const endPos = activeInput.selectionEnd;
  7.         const currentValue = activeInput.value;

  8.         // 将按钮上的文字插入到当前光标位置
  9.         activeInput.value = currentValue.substring(0, startPos) + buttonText + currentValue.substring(endPos);

  10.         // 将光标移动到插入文字之后
  11.         activeInput.selectionStart = activeInput.selectionEnd = startPos + buttonText.length;

  12.         // 将焦点重新设置回输入框
  13.         activeInput.focus();
  14.     }
复制代码

image.png986706542.png
组件制作完成。
使用方法
页面添加组件容器,设置为该组件,单元格内填写你要输入的字符串
image.png678419189.png
image.png317683104.png


6 个回复

倒序浏览
lovert
银牌会员   /  发表于:2025-1-18 22:26:58
来自 2#
本帖最后由 lovert 于 2025-1-18 22:32 编辑

这个可以结合图文列表动态的设置自己预设的字符串
image.png67403563.png
image.png169914244.png
回复 使用道具 举报
137294886
金牌服务用户   /  发表于:2025-1-19 00:02:23
板凳
谢谢分享
回复 使用道具 举报
紫菩提
初级会员   /  发表于:2025-1-20 21:57:54
地板
感谢大神的分享, 我们跟着享福了。  好人一生平安
回复 使用道具 举报
追风
中级会员   /  发表于:5 天前
5#
插眼学习,
回复 使用道具 举报
中力工贸
金牌服务用户   /  发表于:5 天前
6#
回复 使用道具 举报
NYZMIS
金牌服务用户   /  发表于:前天 10:18
7#
谢谢分享
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部