Вставка текста в несколько полей

230

24 июля 2017, 16:30

На сайте есть три поля input: имя, пароль, ящик. Скопировал текст из Excel (например), который содержится одной строкой, но с разделителем "запятая". Как сделать так, чтобы при вставке текста в первое поле, если найдена запятая, оставшийся текст вставляется во второе поле, ну и далее в третье?

С вставкой текста "по клику", можно не заморачиваться))

Answer 1

Если правильно понял вопрос, то можно сделать так. Вставьте в первый инпут вашу строку, например, "Вася Пупкин,password,email".

$('form input').first().on('input', function() { 
  var str = $(this).val(); 
  str = str.split(','); 
  $('form input').each(function(index) { 
    $(this).val(str[index]); 
  }); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
  <input type="text" name="name" /><br /> 
  <input type="text" name="password" /><br /> 
  <input type="text" name="email" /><br /> 
</form>

Answer 2

Вставьте строку с 2 запятыми правда только через ctrl+v

<!DOCTYPE> 
<html> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>Пример веб-страницы</title> 
 </head> 
 <body> 
     <label>Name<input type="text" id="firstInput"></label> 
     <label>Pasword<input type="text" id="secondInput"></label> 
     <label>Mail<input type="text" id="thirdInput"></label> 
 </body> 
    <script> 
        'use scrict'; 
        firstInput.onkeyup = function(e){ 
            if(e.keyCode != 86) return; 
            let string = firstInput.value, 
                stringAreAready = false; 
            firstInput.value = string.substring(0, string.indexOf(',')); 
            string = string.substring(string.indexOf(',') + 1); 
            secondInput.value = string.substring(0, string.indexOf(',')); 
            string = string.substring(string.indexOf(',') + 1); 
            thirdInput.value = string; 
        }; 
    </script> 
</html>

Answer 3

Вот простой пример по JQuery но при условии что и последовательность данных в каждой строке будет всегда одна....
ЗЫ: я думаю, при вашей логике получения данный, у вас всегда будут проблемы если пользователь захочет что то изменить в вставленном тексте... данные могу удалиться!

$(document).ready(function(){ 
 
$('#name').on('change',function(){ 
var data = $(this).val().trim().split(','); 
if(data[0] != ''){ 
$('#name').val(data[0]); 
} 
 
if(data[1] != ''){ 
$('#pass').val(data[1]); 
} 
 
if(data[2] != ''){ 
$('#email').val(data[2]); 
} 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<input type="text" id="name"><br> 
<input type="password" id="pass"><br> 
<input type="email" id="email"><br>