Instead of the usual input form, it is impossible to do so that for each character entered there is its own cell.

  • <input type="text" id="tt" name="tt" maxlength="1" /> well and stylize?) - Moonvvell
  • Is it possible to have a vivid example (or picture) of what you want, and also if you can code that you tried to achieve a result? - Vadim Ovchinnikov
  • There are no pictures, as a result, you need to draw a form of 13 cells for the SNILS number, in each of which a number will be entered. - Evgenia
  • There is only one question: why? - SLy_huh

4 answers 4

 var str = 'Привет, мир'; var len = str.length; for(i=0;i<len;i++){ $('body').append('<input type=text size=1 value="'+str.substr(i,1)+'" >'); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <body></body>

Something like this.

  • Your idea would be improved and go) - Yuri

Plague theoretical option))

 function number(data) { data.value = data.value.replace(/[^\d]/g, ''); }; 
 input { font-size: 22px; letter-spacing: 23px; background-image: repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent 35px); padding: 5px 10px; margin: 0; width: 261px; border: none; border-top: 1px solid #000; border-bottom: 1px solid #000; } 
 <input type="text" value="" maxlength="7" onkeyup="return number(this);" onchange="return number(this);">

and if on the topic: on a real project, I would make separate inputs for each character

  • I thought about it, but then it all goes to the server in separate numbers? or I'm wrong? - Evgenia
  • all the numbers put in one array and send to the server - Alex
  • The last character can not be entered, although so wanted. - Sasha Omelchenko

I didn’t quite understand the essence of the question, I can offer my function, which sets a mask (template) for input in the format dddd dddd ddddd , where d is a single numeric character

 jQuery.fn.extend({ setMask: function(mask) { $(this).off('input'); var masked_all = []; masked_all[$(this)] = []; if (mask == '' || mask == undefined) { return false; } var input = []; var com_chars = 'dc'; $(this).attr('title', mask); console.log('masked'); $(this).on('paste', function(e) { var masked = masked_all[$(this)]; var i = mask.length; var out = ''; var data = e.clipboardData; while (i-- && out.length <= mask.length) { switch (mask[i]) { case 'd': cond = !isNaN(data[i]); break; case 'c': cond = diff.toLowerCase() != diff.toUpperCase() // checks if it's a char break; default: out += mask[i]; break; } if (cond) { out += data[i]; } } console.log(out); }) $(this).on('input', function(e) { var masked = masked_all[$(this)]; var diff = ''; var cond = false; value = $(this).val(); var i = value.length; while (i--) { if (masked[i] != value[i] && masked.length <= mask.length) { diff = value[i]; var out = 0; while (!out) { out = 1; switch (mask[masked.length]) { case 'd': cond = !isNaN(diff); break; case 'c': cond = diff.toLowerCase() != diff.toUpperCase() // checks if it's a char break; case undefined: //return false; break; default: //masked.push(mask[i]); out = 0; break; } if (masked.length >= mask.length) { out = 1; } } if (cond) { masked.push(value[i]); var cc = com_chars.indexOf(mask[masked.length]); if (!(++cc) && mask[masked.length] != undefined) { // !!(++cc) - converts -1 to false; masked.push(mask[masked.length]); } } else { //console.log('asdw'); $(this).trigger('mouseover'); setTimeout(function() { $(this).trigger('mouseout') }, 2000); } } } if (diff.length === 0) { if (mask[masked.length - 1] != 'd') { masked.pop(); } masked.pop(); } console.log(masked); $(this).val(masked.join('')); }) } }) $('input').eq(0).setMask('dddd ddd dddd'); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input/>

    Entering each value in the input, the focus is transferred to the next input. If there is a need to erase the value, then when the field is empty, the focus is transferred to the previous input and the value is erased already in it. Since this is essentially one value, it is necessary to collect it from individual inputs in the submission event (it does not work in this sandbox, since the submission event is blocked).

     $(function() { $('input').on('keydown', function(e) { if(e.keyCode == '8' && $(this).val() == '') { $(this).prev().focus(); } }); $('input').on('keypress', function(e) { if(e.keyCode !== '8') $(this).next().focus(); if( $(this).val().length > 0 ) return false; }); $('form').submit(function() { var dividedValue = ''; $(this).find('input').each(function() { dividedValue += $(this).val(); }); console.log(dividedValue); }); }); 
     .block { display: -webkit-box; display: -ms-flexbox; display: flex; width: 500px; min-height: 100vh; margin: 0 auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .block input { width: 40px; margin: 0 3px; border-radius: 5px; padding: 3px; border: 1px solid #999; text-align: center; } .block input:focus { box-shadow: 0 0 5px blue; } .block button { margin-left: 20px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="block" action="#"> <div class="divided-input"> <input type="text" /> <input type="text" /> <input type="text" /> <input type="text" /> <input type="text" /> </div> <button>Submit</button> </form>