값 선택 키보드 버튼으로 선택

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">