モバイルブラウザ用の一般的なタイピングエリア

Question

オーバーフローしたdiv内に複数の入力ボックスのスタックがあります。 ユーザーが入力ボックスの1つにフォーカスすると、ネイティブキーボードがスライドして、入力する場所や内容が表示されません。

私の解決策は共通の入力領域を作成することでした。私は1つの答えを見つけ出し、それを微調整しましたが、入力ボックスにポストバックすることはできません。助けてください、ありがとうございます！

https://jsfiddle.net/JCprog/p797v44b/14/

$('.jml').on('focus', function(){ 
$('#divChoices').show() 
$('#ch1').focus() 
thefield = $(this).prev() 
$('.btnselect').on('click', function(){ 
    theselected = $(this).prev() 
    thefield.val($('#ch1').val()) 
    $('#divChoices').hide() 
}) 

}）

Answer 1

別の1の内側のハンドラを宣言決して：あなたはJMLフィールドがフォーカスを取得するたびに新しいハンドラを追加します。このように

$('.btnselect').on('click', function(){ 

を。

私は、集束要素にクラスを追加し、DIVを閉じるとき後にそのクラスを使用することをお勧めしたい：

$('.jml').on('focus', function(e){ 
 
    $('#divChoices').show(); 
 
    $('#ch1').val(this.value).focus(); 
 
    // 
 
    // add class to current input field 
 
    // 
 
    $(this).addClass('active'); 
 
}) 
 

 
$('.btnselect').on('click', function(e) { 
 
    // 
 
    // use the class to select the input field and remove it 
 
    // 
 
    $('.jml.active').val($('#ch1').val()).removeClass('active'); 
 
    $('#divChoices').hide(); 
 
})

#divChoices { 
 
    border: none; 
 
    position: fixed; 
 
    text-align:center; 
 
    top: 0; 
 
    width:100%; 
 
    height:100%; 
 
    display: none; 
 
    background-color: white; 
 
} 
 
#divChoices input[type="text"]{ 
 
    height:25%; 
 
    width:57% 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="divform"> 
 

 
    <input class="jml" size="75" type="text"><br> 
 
    <input class="jml" size="75" type="text"><br> 
 
    <input class="jml" size="75" type="text"><br> 
 
    <input class="jml" size="75" type="text"><br> 
 
    <input class="jml" size="75" type="text"><br> 
 
    <input class="jml" size="75" type="text"><br> 
 
    <input class="jml" size="75" type="text"><br> 
 
    <input class="jml" size="75" type="text"><br> 
 
    <input class="jml" size="75" type="text"><br> 
 
    <input class="jml" size="75" type="text"><br> 
 
    <input class="jml" size="75" type="text"><br> 
 
</div> 
 

 
<div id="divChoices"> 
 
    <input type="text" id="ch1" name="ch1"><br> 
 
    <button id="btnsel1" class="btnselect">Done</button> 
 
</div>