2017-02-01 16 views
1

HTML/CSS/JSでは、入力フィールドがフォーカスを取得したときに、モバイルからデフォルトのキーボードを画面から隠すことができます。javascript - モバイルのデフォルトのキーボードを非表示にしますが、入力フィールドを有効にします

状況は次のとおりです。バーコードを読み取るための内蔵2Dスキャナーを搭載したハンドヘルドデバイス(Android 5以降、Chromiumベースのもの)でWebソリューションを利用しています。

一部のフィールドはデフォルトでスキャンバーコードから入力する必要があり、画面に表示されるデフォルトのキーボードを非表示にしたいと思っています。次に、必要に応じて、実際にデフォルトのキーボードを表示するオプションをいくつか用意したいと思います。

私は、同様の質問に対するさまざまな提案を読んでいます(ほとんどの場合、フィールドを読み上げるだけでなく、フォーカスを取得した直後にフィールドをぼかす方法もあります)。しかし、スキャナはフィールドに何も入力しないので、 - フィールドにフォーカスが必要です。

+2

に更新のWebViewとゼブラTC 51の上にこれを行う方法は、 'blur'を使用して入力からフォーカスを失うことを除いて、ありません。キーボードに表示/非表示を指示することはできません。ブラウザによって制御されます。 –

+0

RikはブラウザとデバイスのOSの間の対話ですWebページはそれを制御できません。 – ADyson

答えて

0

ありがとうございました。私がここに投稿している回避策をしました:

基本的な原則は、入力フィールドをぼかして、キー入力をキャプチャして入力フィールドに追加することです。それが、これは動作しますが、他の誰かが関心を持つべき場合には、他の状況に適応するのは簡単であるべきものですので、私はすべての数字バーコードをバーコードスキャナを使用しています。このような状況で

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script> 
$(document).ready(function() { 
    // _input_fields and _scan_fields are jQuery objects with the relevant elements 
    let _input_fields = $("input[type=number], input[type=text], input:not([type]), select"); 
    let _scan_fields = $("input[type=number].scanner"); 
    // _ignore is set to true when a scannable field actually _should_ get focus 
    var _ignore = false; 
    // onfocus() for relevant input fields on page 
    _input_fields.focus(function(){ 
     // only do something if scannable fields shouldn't actually get focus 
     if (!_ignore) { 
      // outer is the current input field that is getting focus 
      let outer = this; 
      // found is set to true if the current input field is scannable 
      let found = false; 
      // loop through all scannable fields to see if the current input field is one of them 
      _scan_fields.each(function(index) { 
       // inner is one of the scannable fields, possibly the current input field 
       let inner = this; 
       // _field stores the current input field _if_ it is scannable 
       var _field; 
       // only check (and potentially reset key capture) if we have not found the current 
       // input field to be one of the scannable fields (yet) 
       if (!found) { 
        // check if the current input field "outer" is the currently examined 
        // scannable field "inner" 
        if (inner == outer) { 
         // the current input field is one of the scannable fields 
         // immediately remove focus to disable mobile keyboard 
         inner.blur(); 
         // remember which input field we have found and disable further checks 
         _field = inner; 
         found = true; 
         // remove any existing keycapture (might destroy existing functionality!!!) 
         $(document).off("keypress"); 
         // capture keypresses and add numbers to the input field 
         $(document).keypress(function(event){ 
          var _field = inner; 
          let keynum = event.which; 
          if (keynum == 13) { // enter 
           // ignore or submit? 
          } else if ((keynum < 48) || (keynum > 57)) { 
           // not-a-number, ignore in this case 
          } else { 
           // a number, add to field value 
           $(_field).val($(_field).val() + String.fromCharCode(event.which)); 
          } 
         }); 
        } else { 
         // this is a regular field 
         // remove any existing keycapture (might destroy existing functionality!!!) 
         $(document).off("keypress"); 
        } 
       } 
      }); 
     } 
    }); 
    // add a button after each scannable input field 
    $("input[type=number].scanner").after(function(){ 
     return "<button class='descanner'>123</button>"; 
    }); 
    // if those buttons are pressed, the input field before them actually gets focus 
    // overriding the new behaviour 
    $("button.descanner").click(function(event){ 
     // these buttons do not submit the form 
     event.preventDefault(); 
     // remove any existing keycapture (might destroy existing functionality!!!) 
     $(document).off("keypress"); 
     // set focus for the input field but make sure we don't catch this above 
     // also, clear content of input field 
     _ignore = true; 
     $(this).prev("input[type=number].scanner").val("").focus(); 
     _ignore = false; 
    }); 
}); 
</script> 
</head> 
<body> 
<form> 
    <input type="number" name="field1" class="" /> 
    <input type="text" name="field2" class="" /> 
    <input name="field3" class="" /> 
    <select name="field4" class=""> 
     <option value="bac">abc</option> 
    </select> 
    <input type="number" name="field5" class="scanner" /> 
    <input type="number" name="field6" class="" /> 
    <input type="number" name="field7" class="scanner" /> 
</form> 

</body> 
</html> 

フォームには7つのフィールドがあり、そのうち2つは必要な機能を持っています。これらのフィールドの手動編集を有効にするには、これらの2つのフィールドのそれぞれにボタンが追加されます。

これは、クロム55でテストされており、クロム55

関連する問題