如何实现实时获取输入框或者多行文本框输入内容的长度？

登录

本帖最后由 LukeLiu 于 2019-11-27 18:36 编辑

如何针对输入框中的文长字度，实时判断已输入多少文字？我在下面已输入文字长度使用了len()函数判断当前已输入字符数和剩余字符数，但必须要输入框失去焦点后才会触发更新。
如何才能边输入的时候实时就更新剩余字符数呢？毕竟一般填写短信内容就会直接点发送按钮了，不会再去刻意点其它地方。
（点立即发送按钮更新剩余字数的方式不需要，因为都已经点立即发送了，再更新剩余字数也没任何意义了，需要的是在没点之前就可以判断还剩余多少字）

LukeLiu · LukeLiu

本帖最后由 LukeLiu 于 2019-11-27 20:14 编辑

活字格们目前的策略

对于单元格的值，活字格目前的策略是当这个单元格（比如输入框或者多行文本框）失去焦点后才会触发更新。

解决问题

通过键盘事件的触发，手动获取单元格的值，当然，这样的非常规操作需要一些代码实现，不过活字格已经内置了jQuery，可以让我们比较方便的处理这个需求，效果：

步骤：

1. 设置“多行文本框”或者“输入框”的单元格名称为“input”，显示字数的单元格名称为“output”。

2. 在需要这个功能的页面设置页面加载命令：

其中，代码为：

// 可配置部分
const INPUT_CELL_NAME = "input"
const OUTPUT_CELL_NAME = "output"
const INPUTABLE_ELEMENTS = ["textarea", "input"]
// 工具部分
const getCellByName = (cell_name) => Forguncy.Page.getCell(cell_name)
const getStrLen = (str) => str ? str.length : 0
const setCellKeyupEventHandleFuncByName = (cell_name, callback) => $(`[fgcname=${cell_name}]`).keyup(callback)
const setCellValueByName = (cell_name, output_value) => {
let cell = getCellByName(cell_name)
cell.setValue(output_value)
}
// 实现部分
function main() {
let input_content_length = 0
const handleFunc = () => {
input_content_length = getStrLen($(`[fgcname=${INPUT_CELL_NAME}]`).find(INPUTABLE_ELEMENTS.join(",")).val())
setCellValueByName(OUTPUT_CELL_NAME, input_content_length)
}
setCellKeyupEventHandleFuncByName(INPUT_CELL_NAME, handleFunc)
}
// 执行部分
main()

复制代码

		自动登录	找回密码
密码			立即注册

[已处理] 如何实现实时获取输入框或者多行文本框输入内容的长度？

最佳答案

1 个回复

本帖子中包含更多资源

微信认证勋章