HTML 5 inputフォーカスキーボードポップアップの問題

2694 ワード

最近のプロジェクトでは、PDA装置を使用しています.スキャンガンがあり、スキャンした内容をhtmlのinputコントロールに記入することができます.しかし、inputコントロールはフォーカスを取得するだけでキーボードがポップアップするという難しい問題があります.
この点はandroidオリジナルコントロールとは異なり、オリジナルコントロールEditTextはそのrequestFocus()を呼び出し、フォーカスするだけでキーボードはポップアップしません.htmlのinputコントロールは、focus()メソッドを呼び出すとキーボードがポップアップします.
プロジェクトのニーズは、最初はinputコントロールに焦点を当てるだけで、銃をスキャンして入力し、inputコントロールをクリックすると、キーボードをポップアップして修正することができます.
この問題解決の核心はinputコントロールがフォーカスしている間にキーボードをポップアップせず、クリックしたときにキーボードをポップアップすることです.
多くの方法を試み,最後にreadOnly属性の奇妙な役割を発見した.inputコントロールのfocus()メソッドを呼び出すと、readOnlyプロパティがtrueの場合、キーボードはポップアップされませんが、フォーカスはinputコントロールにあります.このときreadOnlyプロパティをfalseに設定すると、キーボードはポップアップされませんが、銃をスキャンして入力できます.
例:




    
    Test


    
        
    

    
        
    
    
        
               
               
    
    
    
        
    

    



    window.addEventListener('load', function () {
      document.getElementById("scan1").focus()
    })

    function onKeyPress(id) {
      var keyCode = event.which || event.keyCode
      if (keyCode == 13)  {
        document.getElementById(id).focus()
      }
    }

    function onFocus () {
      var target = event.target
      setTimeout(function () {
        target.readOnly = false
      },0)

    }

    function onBlur() {
      event.target.readOnly = true
    }

2016先端技術観察有感

BUI Webapp入門チュートリアル