Wert auswählen als Tastatur-Taste drücken

Question

Ich mache ein System, wo nach Unschärfe eine HTML-Auswahl anhängen und Benutzer müssen eine Option aus diesem Auswahlfeld auswählen. Aber ich muss der ausgewählte Wert sollte automatisch wählen, wenn Benutzer drücken denselben Wert Schlüssel in der Tastatur, als ob i 2 drücken Sie den gewählten Wert 2 sein sollte

$('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

Einfach Einstellung des Fokus auf die neue Select-Steuerung wie durch das Autofokus Attribut zu Ihrem Select-Steuerelement sollte den Trick tun.

$('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

Wenn der Benutzer nur die Eingabe verschwimmen dann zeigen Sie nur die Auswahlbox

Dann, wenn es etwas Wert in der Eingabe ist, wird es in der Auswahlbox ausgewählt werden

Ich hoffe, diese Hilfe

$('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">