Есть некий input
со стилями border-image
в виде подчеркивания.
Как добавить новый input
и продолжить вводить текст дальше как только закончится ширина предыдущего инпута?
Либо это можно сделать как то по другому?
-
1Продемонстрируйте Ваши наработки и приведите пример того, что Вам надо, ибо сложно уловить что надо.– user20761822 ноя 2016 в 21:02
-
@Other да, конечно, секунду– Atomrr22 ноя 2016 в 21:18
-
@Other очень грубо набросал, но смысл один и тот же. Нужно при переполнении строки не что бы текст уезжал за пределы, а добавление новой строки с таким же оформлением– Atomrr22 ноя 2016 в 21:25
2 ответа
Я не сразу уловил суть того, что надо сделать. Как вариант, можно пойти таким путём:
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 и скрываете их все кроме первого. После ввода предельного числа символов в первый инпут автоматически открывается второй, и ввод продолжается туда (потом третий и т.д.) А если удалять символы бэкспейсом, то, соответственно, инпуты будут один за другим скрываться.
Проблема здесь в том, что нельзя будет дополнять текст в середине - только дописывать что-то в конце. Ну и не очень понятно, зачем Вам (кроме визуальной фишечки) нужно такое? )) Ведь содержимое инпутов, если его понадобится как-то использовать, придётся склеивать по кускам (оно не будет единым текстом, поскольку каждый инпут - это автономный элемент со своим содержимым).
-
Именно визуальная фишка и интересовала) Не чего поделать не могу, такое тз) Эти инпуты не будет использоваться более, чем написать/удалить в них текст. Спасибо вам большое, это то, что было нужно)– Atomrr23 ноя 2016 в 11:00
-
А можно ли это переделать немного по другому? Что бы не создавать и не скрывать инпуты, а что бы через createElement создавать новый и также его удалять и менять фокус? Спасибо– Atomrr4 дек 2016 в 4:36
-
теоретически возможно - попробуйте ) вот здесь доп.инфа: learn.javascript.ru/modifying-document 4 дек 2016 в 10:37
-
Думаю, тут без маленького 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>
-
на вашем примере он просто растягивается. Может есть какой то другой способ это реализовать? Не через инпут? Гуглил про textarea, но это, как я понял, совершенно не подходит– Atomrr23 ноя 2016 в 8:39