Форум

денис77447327 · #1 (**permalink**) 28.09.2017, 20:06

как сделать чтобы при вводе текста ширина у input="text" увеличивалась и уменьшалась исходя из объема текста в поле.
без джаваскрипта

j0hnik · #2 (**permalink**) 28.09.2017, 20:13

можно имитировать инпут

<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		span{
  border: 1px solid gray;
  padding: 2px;
}
	</style>
</head>
<body>
<span contenteditable>какой-то текст</span>
</body>
</html>

денис77447327 · #3 (**permalink**) 28.09.2017, 22:08

денис77447327 · #4 (**permalink**) 29.09.2017, 10:42

а можно как то в инпут вставить это? спан нельзя использовать

<span class="long-edit-span">
 
            <input class="commonstring edit long-edit" data-mergefields="Number" id="commonStringgsTransportRemovable" name="commonStringgsTransportRemovable" type="text" value="">
        </span>

j0hnik · #5 (**permalink**) 29.09.2017, 13:01

что конкретно и куда вставлять??

денис77447327 · #6 (**permalink**) 29.09.2017, 15:04

Сообщение от j0hnik

что конкретно и куда вставлять??

в теге input прописать что то чтобы поле расширялось при вводе не используя спан вообще.. дело в том что придется тогда на сервере переписывать js как мне сказали) если я правильно понял. если использовать спан

Rasy · #7 (**permalink**) 29.09.2017, 16:44

денис77447327,
а ты подойди с другой стороны

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .long-edit-span {
      border: 1px solid gray;
      padding: 2px;
    }
    .commonstring {
      display: none;
    }
  </style>
</head>
<body>
  <span class="long-edit-span" contenteditable>
    <input class="commonstring edit long-edit" data-mergefields="Number" id="commonStringgsTransportRemovable" name="commonStringgsTransportRemovable" type="text" value="">
    какой-то текст
  </span>
  <script>
    (function () {
      document.querySelector('.long-edit-span').addEventListener('keyup', function(e) {
        document.getElementById('commonStringgsTransportRemovable').value = e.target.textContent.trim(); 
      });
    })(); 

  </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript