Question

我需要对以下代码进行重新处理以达到新的要求。本质上，它所做的就是获取Price字段，并根据的索引将Pounds和Pence分别写入2个单独的字段中。符号

这一切都很好，但是我有一个新的要求，即取一个Name字段并将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());
  };


});

Answer 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>

说明在注释中。

将文本字段分为2个单独的字段

1 个答案: