There is some input with underscore border-image styles. How to add a new input and continue to enter text further as soon as the width of the previous input ends? Or is it possible to do something else?

https://jsfiddle.net/hz7seapd/

  • one
    Show your achievements and give an example of what you need, because it is difficult to grasp what you need. - user207618
  • @Other yes, of course, second - Atomrr
  • @Other very roughly sketched, but the meaning is the same. It is necessary when the line is full, not that the text goes out of bounds, and adding a new line with the same design - Atomrr

2 answers 2

I did not immediately grasp the essence of what needs to be done. Alternatively, you can go this way:

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

That is, you create the nth number of inputs with the same maxlength and hide them all except the first. After entering the limit on the number of characters in the first input, the second automatically opens, and input continues there (then the third, etc.). And if you delete characters with backspace, then, accordingly, the input will be hidden one by one.

The problem here is that it will not be possible to supplement the text in the middle - just add something at the end. Well, it is not very clear why you (except for the visual chip) need this? )) After all, the contents of the inputs, if you need to use it somehow, will have to be glued together in pieces (it will not be a single text, since each input is an autonomous element with its own content).

  • It was the visual chip that interested) I can’t do anything about it, such a mc) These inputs will not be used more than writing / deleting text in them. Thank you very much, this is what was needed) - Atomrr
  • Is it possible to remake it a little differently? Not to create or hide the input, but to create a new one through createElement and also delete it and change the focus? Thank you - Atomrr
  • theoretically possible - try) here's additional info: learn.javascript.ru/modifying-document - humster_spb
  • Thanks again, I read) - Atomrr

I think there is no little js here. So, for example:

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

fiddle

  • in your example, it just stretches. Maybe there is some other way to implement it? Not through the input? Googled about textarea, but this, as I understood it, doesn’t fit at all - Atomrr