Javascript-форум - Улучшение html-страницы путём редактирования составленного JS-синтаксиса

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Улучшение html-страницы путём редактирования составленного JS-синтаксиса (https://javascript.ru/forum/misc/75534-uluchshenie-html-stranicy-putjom-redaktirovaniya-sostavlennogo-js-sintaksisa.html)

Улучшение html-страницы путём редактирования составленного JS-синтаксиса

Здравствуйте, уважаемые пользователи сего сайта!

Будучи новичком в изучении языков программирования, я вынужден обратиться к вам всем за помощью следующего характера:

Как html-страницу с автозаполнением формы (в данном случае это автозаполнение происходит при нажатии на кнопку "Заполнить") настроить на автоизменение длины каждой строки ввода (input) в зависимости от посимвольной длины каждого автоматически вводимого "value"?

К примеру, имеется такой синтаксис (обычная html-страница с событием автозаполнения формы при нажатии на кнопки "Заполнить"):

Имя<br>
<input id="name" type="text"><br>
Маил<br>
<input id="email" type="email"><br>
Телефон<br>
<input id="phone" type="tel"><br>
Пароль<br>
<input id="pos_password" type="text"><br>
Повторный пароль<br>
<input id="passwordConfirm" type="text"><br><br>
<button id="rec">Заполнить</button><br>

<script>
rec.onclick=()=>
{
arr=(
prompt(
'Введите данные о себе через запятую \n(имя, мыло, тел, пароль, пароль)',
'Иванов Иван, ivanov@ivan.ru,8(495)1234567,12345678,12345678'
)+'').split(',');
arr.length==5 && document
.querySelectorAll('input#name,input#email,input#ph one,input#pos_password,input#passwordConfirm')
.forEach((a,b)=>a.value=arr[b])};
</script>

Изначально при автозаполнении у меня часть вводимой информации ("value") не была видна, так как стандартная длина поля ввода "input" маленькая, а содержимое некоторых вводимых строк явно превышает эту длину (по количеству символов, как вы уже поняли).

До сего момента я, имея все свои данные (так называемые "value"), которыми автозаполняю форму, был вынужден посимвольно посчитать их и к каждому "input"-у добавить атрибут "size" с соответствующим числовым значением.

У меня возникла мысль о возможности применения нечта вроде АВТОИЗМЕНЕНИЯ ПОЛЯ ВВОДА "INPUT" ПРИ АВТОЗАПОЛНЕНИИ ФОРМЫ.
Недавно мне для достижения этой цели была предложена идея с применением такого свойства объекта JS как "event".

Далее, задав вопрос с похожей формулировкой на проекте "Ответы@Mail.Ru", я получил от одного из пользователей ответ в виде следующего синтаксиса:

oninput=onchange=()=>{
event.target.tagName=='INPUT'&&event.target.type== 'text'&&(event.target.style.width=(event.target.va lue.length+1)+'ex');
}

Данный синтаксис я проверил в деле, он работает, но в своём классическом виде (то есть, при ручном заполнении строк ввода они вроде как изменяют свой размер как надо)... Но дело в том, что я хочу, чтобы это событие срабатывало ИМЕННО при автозаполнении формы путём нажатия на кнопку! Это вообще возможно или нет???

Заранее спасибо всем и каждому, кто откликнулся!!!

Возможно, меняй параметр size относительно количества введенных символов.

<input id="name" type="text" size="100">

А вообще можно изменить высоту, сделать их квадратными, влезет больше)

garrip91,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Цитата:

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

oninput=onchange=()=>{
event.target.tagName=='INPUT'&&event.target.type== 'text'&&(event.target.style.width=(event.target.va lue.length+1)+'ex');
}

Данный синтаксис я проверил в деле, он работает, но в своём классическом виде (то есть, при ручном заполнении строк ввода они вроде как изменяют свой размер как надо)... Но дело в том, что я хочу, чтобы это событие срабатывало ИМЕННО при автозаполнении формы путём нажатия на кнопку! Это вообще возможно или нет???

<input type=text id="test">
<script>
var test = document.querySelector("#test");
test.addEventListener("input", function(event) {
event.target.tagName=='INPUT'&&event.target.type== 'text'&&(event.target.style.width=(event.target.value.length+4)+'ex');
});

test.value = "12345678901234567890123456789012345";
  test.dispatchEvent(new Event("input"));
</script>

Dilettante_Pro, llllllllllllllllllllllllll - некрасиво. Тут надо на самом деле извращаться.) (или использовать monospace, но это не кру)

Aetae,
Ваше понятие красоты для меня непостижимо.
Слишком просто?

Dilettante_Pro, непропорционально длина растёт.)

<div contenteditable style="border: 1px solid gray; min-width: 150px; display:inline-block; padding: 0 5px;">11</div>

чем не инпут?

j0hnik, вставкой.

Aetae,
Не уловил мысль..