【问题标题】:Barcode scanner auto-return feature条码扫描器自动返回功能
【发布时间】:2021-07-07 20:24:21
【问题描述】:

我正在尝试构建一个非常简单的应用程序,该应用程序向包含用于输入产品 upc 信息的字段的站点显示 web 视图。该应用程序的唯一原因是为我们的仓库员工提供内置的条形码扫描仪功能。到目前为止一切正常,直到使用以下代码将扫描的条形码信息插入文本字段:

webView.evaluateJavaScript("document.activeElement.value='\(text)'")

我遇到的问题是我正在尝试编写一种在扫描后立即提交/搜索表单的方法。截至目前,搜索按钮甚至没有出现,因为使用 value 属性似乎没有注册为文本输入。

我已经在网上搜索了几个小时(可能是错误的)来寻找类似的问题,我能想到的唯一解决方案是模拟按键并聚焦于文本字段。充其量只是对 Enter 键的简单按键。但是,在屏幕键盘上实际键入文本之前不会出现搜索按钮,我想知道是否需要 Space/Delete 键的组合,然后是 Enter 键。到目前为止,没有任何效果,我很想就应该在这里使用什么方法提出一些建议。

【问题讨论】:

  • 你可以尝试在输入值后手动触发更改事件,webView.evaluateJavaScript("document.activeElement.dispatchEvent(new Event('change', { 'bubbles': true })))
  • @thatguytyler 谢谢,有帮助!添加该命令确实启用了“搜索”按钮。然后用户可以点击屏幕键盘上的 Return 来提交。但是,我正在寻找一种方法来模拟 Return 键或自动提交搜索功能。
  • 现在可以提交了,可以选择并模拟点击事件吗? document.getElementById('ID').click()。我不确定提交按钮的 HTML 是什么样的,如果您发布它,我可以提供更多帮助。
  • 我将添加一个答案以更清楚地布置所有内容
  • 这是一个我无法访问的托管网页。我可以获得此特定文本字段的 ID,但我正在寻找更通用的解决方案,以实现可在其他表单上使用的简单扫描和提交功能。不过,使用 dispatchEvent 函数检测更改完成了一半。有没有办法通过 Javascript 或 Swift 触发按键事件?

标签: javascript ios swift


【解决方案1】:

如果提交不可见,可能是由于更改事件未触发,请在填充文本值后模拟更改事件。

webView.evaluateJavaScript("document.activeElement.dispatchEvent(new Event('change', { 'bubbles': true }))")

在更改事件之后,我们可以定位按钮并触发点击事件。

webView.evaluateJavaScript("var btn = document.querySelector('button')if(btn.textContent.includes('Search')){btn.click()}")

【讨论】:

  • 以为就是这样!不幸的是,虽然没有错误,但它没有按预期提交。和以前一样,第一部分效果很好,但是 KeyboardEvent 没有变化。但是,如果在屏幕键盘上按下回车键,就会触发搜索功能。
  • 嗯,让我们尝试一个扩展的 keydown 事件,我已经更新了上面的第二个 sn-p。表单是否使用“enter”键和“return”键提交。主键盘和小键盘上的那个?
  • 同样的结果。是的,在桌面上,表单将使用两个 Enter 键提交。
  • 这是 HTML 表单还是别的什么?您能否发布您正在与之交互的 HTML 示例?
  • 这是搜索时聚焦的文本字段。希望有帮助!
【解决方案2】:

向输入添加事件监听器并相应地提交表单

const input = document.querySelector('input');
const log = document.getElementById('values');

input.addEventListener('input', updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
  // code to search barcode
}
<input placeholder="Enter some text" name="name"/>
<p id="values"></p>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多