Стилизация input/textarea

752

24 ноября 2016, 10:07

Есть некий inputсо стилями border-image в виде подчеркивания. Как добавить новый input и продолжить вводить текст дальше как только закончится ширина предыдущего инпута? Либо это можно сделать как то по другому?

https://jsfiddle.net/hz7seapd/

Answer 1

Я не сразу уловил суть того, что надо сделать. Как вариант, можно пойти таким путём:

var one = document.getElementById('one'); 
var two = document.getElementById('two'); 
 
one.onkeydown = function() { 
  if(one.value.length == 25) { 
    two.style.display = 'block'; 
    two.focus(); 
  } 
} 
 
two.onkeydown = function() { 
  if(two.value.length == 0) { 
    two.style.display = 'none'; 
    one.focus(); 
  } 
}

input { 
  margin-bottom: 5px; 
  border-bottom: 2px solid black; 
  border-top: none; 
  border-left: none; 
  border-right: none; 
  outline: none; 
} 
 
#two { 
  display: none; 
}

<input type="text" id="one" maxlength="25" /><br /> 
<input type="text" id="two" maxlength="25" /><br />

То есть Вы создаёте n-ое количество инпутов с одинаковым maxlength и скрываете их все кроме первого. После ввода предельного числа символов в первый инпут автоматически открывается второй, и ввод продолжается туда (потом третий и т.д.) А если удалять символы бэкспейсом, то, соответственно, инпуты будут один за другим скрываться.

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

Answer 2

Думаю, тут без маленького js не обойтись. Вот так, например:

<div class="container">
  <form action="">
    <div class="form-item">
      <label for="">тестовый</label>
      <input type="text" onkeypress="this.style.width = ((this.value.length + 1) * 20 + 10) + 'px';">
    </div>
  </form>
</div>