條形碼掃描器自動返回功能

Question

我正在嘗試構建一個非常簡單的應用程序，該應用程序向包含輸入產品 upc 信息的字段的站點顯示 webview。 該應用程序的唯一原因是為我們的倉庫員工提供內置的條形碼掃描儀功能。 到目前為止一切正常，直到使用以下代碼將掃描的條形碼信息插入到文本字段中：

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

我遇到的問題是我正在嘗試編寫一種方法，讓表單在掃描后立即提交/搜索。 到目前為止，搜索按鈕甚至沒有出現，因為使用 value 屬性似乎沒有注冊為文本輸入。

我已經在網上搜索（可能是錯誤的）幾個小時來尋找類似的問題，我能想到的唯一解決辦法是模擬按鍵，重點放在文本字段上。 充其量只是一個簡單的 Enter 鍵按鍵。 但是，直到在屏幕鍵盤上實際鍵入文本后搜索按鈕才會出現，我想知道是否需要組合使用空格鍵/刪除鍵，然后再按回車鍵。 到目前為止，沒有任何效果，我希望就此處應使用哪種方法提出一些建議。

Answer 1

如果提交不可見，可能是由於未觸發更改事件，請在填充文本值后模擬更改事件。

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

在 change 事件之后，我們可以定位按鈕並觸發 click 事件。

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

Answer 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>