Javascript-форум - Копирование с input в input

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

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

- - Копирование с input в input (https://javascript.ru/forum/misc/71755-kopirovanie-s-input-v-input.html)

Murk	10.12.2017 17:09

Копирование с input в input

Добрый день! Незнаю как реализовать следующую задачу. Есть 4 поля. Первое поле где полностью пишится Фамилия Имя Отчество, есть второе поле где пишится просто фамилия, третье под имя и четвертое поле под отчество. Как сделать так чтоб при написании первого поля чтоб автоматически заполнялись поля 2,3,4 своим значениями.

рони	10.12.2017 17:13

Murk,
а как определить окончание записи в первое поле?

Murk	10.12.2017 17:31

Цитата:

Сообщение от рони (Сообщение 472505)

Murk,
а как определить окончание записи в первое поле?

Пример: Пишишь в первом поле фамилию Иванов (и оно автоматически пишится во второе поле) ставишь пробел в первом поле и пишишь Иван (и оно автоматом записывается в 3 поле) снова ставишь пробел в первом поле и пишишь Иванович (и оно автоматом в 4 поле записывалось)

рони	10.12.2017 17:33

Murk,
oninput split

Murk	10.12.2017 17:42

Цитата:

Сообщение от рони (Сообщение 472508)

Murk,
oninput split

Честно говоря я незнаю как это реализовать

рони	10.12.2017 17:43

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

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

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

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

рони	10.12.2017 17:55

Murk,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var inp = document.querySelector(".in"),
        out = document.querySelectorAll(".out");
        inp.addEventListener("input", function(event) {
        inp.value.split(/\s+/).forEach(function(text,i) {
     out[i] && (out[i].value = text)
});

        })
});
  </script>
</head>

<body>
<input type="text" class="in">
<input type="text" class="out">
<input type="text" class="out">
<input type="text" class="out">

</body>
</html>

Murk	10.12.2017 17:56

Цитата:

Сообщение от рони (Сообщение 472510)

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

Меня интересует больше в исполнении js, как написать такой код :cray:

рони	10.12.2017 18:05

Murk,
от вас требовалось написать строки 25-28 хотя бы ... :(

Murk	10.12.2017 20:33

Цитата:

Сообщение от рони (Сообщение 472511)

Murk,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var inp = document.querySelector(".in"),
        out = document.querySelectorAll(".out");
        inp.addEventListener("input", function(event) {
        inp.value.split(/\s+/).forEach(function(text,i) {
     out[i] && (out[i].value = text)
});

        })
});
  </script>
</head>

<body>
<input type="text" class="in">
<input type="text" class="out">
<input type="text" class="out">
<input type="text" class="out">

</body>
</html>

:dance: :dance: СПАСИБО! ЭТО ТО ЧТО НУЖНО!

Murk	10.12.2017 21:02

Цитата:

Сообщение от рони (Сообщение 472511)

Murk,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var inp = document.querySelector(".in"),
        out = document.querySelectorAll(".out");
        inp.addEventListener("input", function(event) {
        inp.value.split(/\s+/).forEach(function(text,i) {
     out[i] && (out[i].value = text)
});

        })
});
  </script>
</head>

<body>
<input type="text" class="in">
<input type="text" class="out">
<input type="text" class="out">
<input type="text" class="out">

</body>
</html>

А что если каждый input имеет свой id, а не класс?

рони	11.12.2017 07:12

Murk,
так укажите ваши id в строках 12, 13 "#id" и "#id,#id,#id" вместо классов

Murk	11.12.2017 16:31

Цитата:

Сообщение от рони (Сообщение 472545)

Murk,
так укажите ваши id в строках 12, 13 "#id" и "#id,#id,#id" вместо классов

Пробую вставить id, заполняется только первое поле,а дальше нет.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var inp = document.querySelector("#idname"),
        out = document.querySelectorAll("#idname_cf2275ee56","#idname_c1fcb405d4","#idname_a49c87b871");
        inp.addEventListener("input", function(event) {
        inp.value.split(/\s+/).forEach(function(text,i) {
     out[i] && (out[i].value = text)
});

        })
});
  </script>
</head>

<body>
<input type="text" id="idname">
<input type="text" id="idname_cf2275ee56">
<input type="text" id="idname_c1fcb405d4">
<input type="text" id="idname_a49c87b871">

</body>
</html>

рони	11.12.2017 16:38

Цитата:

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

"#id,#id,#id"

где остальные?

Цитата:

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

document.querySelectorAll("#idname_cf2275ee56, тут, и тут");

рони	11.12.2017 16:41

Murk,
Знаете ли вы селекторы?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var inp = document.querySelector("#idname"),
        out = document.querySelectorAll("[id^='idname_']");
        inp.addEventListener("input", function(event) {
        inp.value.split(/\s+/).forEach(function(text,i) {
     out[i] && (out[i].value = text)
});

        })
});
  </script>
</head>

<body>
<input type="text" id="idname">
<input type="text" id="idname_cf2275ee56">
<input type="text" id="idname_c1fcb405d4">
<input type="text" id="idname_a49c87b871">

</body>
</html>

Часовой пояс GMT +3, время: 22:01.