値を選択キーボードボタンとして選択

Question

私は、ぼかし後にHTML選択が追加され、その選択ボックスからオプションを選択する必要があるシステムを作っています。しかし、私は彼のキーボードでユーザープレス同じ値のキー場合は、選択した値が、私は2を押しているかのように選択した値は、単ににフォーカスを設定する2.

$('input').on('blur', function() { 
 
    $(this).after("<select class=\"form-control\"><option value=\"Option\">option</option><option value=\"2\">2 </option><option value=\"3\">3 </option><option value=\"4\">4</option><option value=\"5\">5 </option><option value=\"6\">6 </option><option value=\"7\">7 </option><option value=\"8\">8 </option></select>"); 
 
    $('.form-control').on('change', function() { 
 
    $('input').after('<span>' + $(this).val() + '</span>'); 
 
    $(this).hide(); 
 
    }) 
 
})

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

Answer 1

する必要があります自動的に選択する必要があります必要がありますあなたの選択コントロールにオートフォーカス 属性を与えるような新しい選択コントロールは、そのトリックを行う必要があります。

$('input').on('blur',function(){ 
 
$(this).after("<select class=\"form-control\" tabindex=\"1\" autofocus><option value=\"Option\">option</option><option value=\"2\">2 </option><option value=\"3\">3 </option><option value=\"4\">4</option><option value=\"5\">5 </option><option value=\"6\">6 </option><option value=\"7\">7 </option><option value=\"8\">8 </option></select>"); 
 
$('.form-control').on('change',function(){ 
 
$('input').after('<span>'+$(this).val()+'</span>'); 
 
$(this).hide(); 
 
$('.text-control').val($('input').val() + $(this).val()); 
 
}); 
 
$('.form-control').focus(); 
 
})

<script 
 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<input type="text" class="text-control">

Answer 2

ユーザーが入力のみをぼかすならば、あなたはいくつかの値が入力に存在する場合、それは選択ボックス

に選択されます次に選択ボックス

を表示

私はこのヘルプを願っています

$('input').on('blur', function() { 
 
    // check if the select is already present in the DOM 
 
    if (!$(".form-control").length) { 
 
    // get the input value 
 
    var inputVal = $(this).val(); 
 
    
 
    // we start the select form before the loop 
 
    var form = "<select class=\"form-control\"><option value=\"Option\">option</option>"; 
 

 
    // we loop from 2 to 8 
 
    for (i = 2; i < 9; i++) { 
 
     // if the selected value from the input match with the value of the loop var then we selected it 
 
     var selected = (i == inputVal ? " selected" : ""); 
 
     form += "<option value=\"" + i +"\"" + selected + ">" + i +" </option>"; 
 
    }; 
 

 
    // we the the closing tag for the select 
 
    form += "</select>"; 
 
    
 
    // we inject the form after the input 
 
    $(this).after(form); 
 
    } 
 
    
 
    $('input').on('change', function() { 
 
    // the value change in input so we get it 
 
    var newVal = $.trim($(this).val()); 
 
    // we remove all selected attribut of all option in select 
 
    $(".form-control option").removeAttr('selected'); 
 
    // then we add the selected attribut to the right option 
 
    $('.form-control option[value="'+ newVal +'"]').prop("selected","selected"); 
 
    }) 
 
})

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