Как поделить форму ввода на ячейки?

280

21 декабря 2016, 03:50

Вместо обычной формы ввода не получается сделать чтобы для каждого введенного символа была своя ячейка

Answer 1

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>

Как то так.

Answer 2

Чумовой теоретический вариант))

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

а если по теме: на реальном проекте я бы сделал отдельные инпуты для каждого символа

Answer 3

Не очень понял сути вопроса, могу предложить свою функцию, которая задает маску(шаблон) для инпута в формате dddd dddd ddddd, где d - один цифровой символ

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

Answer 4

Вводя каждое значение в инпут, фокус переносится на следующий инпут. Если есть необходимость стереть значение, то при пустом поле, фокус переносится на предыдущий инпут и значение стирается уже в нём. Поскольку по сути это одно значение, то по событию сабмита, надо его собирать из отдельных инпутов (в данной песочнице не работает, поскольку событие сабмита блокируется).

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