Разделение текстового поля на 2 отдельных поля

Мне нужно переработать приведенный ниже код в соответствии с новым требованием. По сути, он берет поле «Цена» и записывает фунты и пенсы в 2 отдельных поля на основе индекса файла . символ,

Все это отлично работает, однако у меня есть новое требование: взять поле «Имя» и написать N в поле с именем name1 и ame в поле с именем name2. Таким образом, по сути, я разделяю имя после первого символа, однако я изо всех сил пытаюсь переписать это, чтобы не использовать расширение . символ в качестве индекса триггера, если это имеет смысл?

$('#price').keyup(function(event) {

  if ($('#price').val().indexOf('.') != -1) {

    $('#pence').val($('#price').val().substr($('#price').val().indexOf('.') + 1, $('#price').val().lengh));

    $('#pounds').val($('#price').val().substr(0, $('#price').val().indexOf('.')));

  } else {
    $('#pounds').val($('#price').val());
  };


});

Это не имеет большого смысла, так как мы не знаем, что такое $('#price').val(). Вы можете использовать Фрагменты стека, чтобы предоставить HTML, который идет вместе с jQuery (не забудьте добавить ссылку на jQuery), и это поможет понять вопрос.

Heretic Monkey 10.06.2019 18:37
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
22
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

$('#fullname').keyup(function(event) {
  // get the value of the main field
  const fullname = $('#fullname').val();
  const
  // set the value for field 1 — get the first character by “[0]” (if there is no fullname fall back to "")
    name1 = fullname[0] || "",
  // set the value for field 2, if fullname is longer than one character get substring from position 1 on else fall back to ""
    name2 = fullname.length > 1 ? fullname.substr(1) : "";
  // set the values of the fields
  $('#name1').val(name1);
  $('#name2').val(name2);
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label style = "display: flex; padding-bottom: 1em;">
  <span>Fullname: </span>
  <input id = "fullname" style = "display:block; flex-grow: 1;">
</label>
<label style = "display: flex; padding-bottom: 1em;">
  <span>Name1: </span>
  <input id = "name1" style = "display:block; flex-grow: 1;" disabled>
</label>
<label style = "display: flex; padding-bottom: 1em;">
  <span>Name2: </span>
  <input id = "name2" style = "display:block; flex-grow: 1;" disabled>
</label>

Описание есть в комментариях.

Другие вопросы по теме