php – How can I change the search form to separate single digits fields?

Use your suggested script but put tab index per each input field :

then do some UX tasks :

since you specify type=number then you cant use maxlength attribute to prevent entrance of more than 1 digit per input so u must handle it in your js.
let user can back to previous input by pressing backspace
replace current input value if the user focus manually on it and press another number
do some UI works !

now you have your separated input boxes that work user-friendly. but you must integrate their input value before submitting to WordPress admin-ajax for passing to your function, or you can send them individually and integrate them in server-side function, do what you want.

here is the demo :

function fetch(){
    $(#keyword).val() = $(#input1).val() + 
                          $(#input2).val() + 
                          $(#input3).val() + 
                          $(#input4).val() + 
                          $(#input5).val() + 
                          $(#input6).val() ; 
   //rest of your function
}

$(function() {

      $(input).keydown(function (e) {
        if(e.keyCode == 8) {
           $(this).prev().focus();
        }
        if (this.value.length == this.maxLength) {
          $(this).val();
        }
    });
  
    $(input).keyup(function () {
        if (this.value.length == this.maxLength) {
          $(this).next().focus();
        }
    });
  
});

input {  
    height: 21px;
    background: #f1f1f1;
    border: 1px #c9c9c9 solid;
    border-radius: 3px;
    -moz-appearance: none;
    appearance: none;
    text-align: center;
    }

<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js></script>
    
<form>
     <input id=input1 type=number  min=0 max=9 tabindex=1  maxlength=1>
     <input id=input2 type=number  min=0 max=9 tabindex=2  maxlength=1>
     <input id=input3 type=number  min=0 max=9 tabindex=3  maxlength=1>
     <input id=input4 type=number  min=0 max=9 tabindex=4  maxlength=1>
     <input id=input5 type=number  min=0 max=9 tabindex=5  maxlength=1>
     <input id=input6 type=number  min=0 max=9 tabindex=6  maxlength=1>
 </form>

php – How can I change the search form to separate single digits fields?

php – How can I change the search form to separate single digits fields?

Leave a Reply Cancel reply