Question

我有以下脚本，当我关注输入字段时，会将name的值插入到隐藏字段first_name中。如果我在name字段中输入多个名称，是否可以将空格后的所有内容移至last_name？

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("input").focusout(function(){
        var first_name = $(this).val();
    	$('input#first_name').val(first_name);
    });
});
</script>
</head>
<body>

<div style="border: 1px solid black;padding:10px;">
  Name: <input id="name" name="name" autocomplete="off">
	<input type="hidden" id="first_name" name="first_name" autocomplete="off"><br>
	<input type="hidden" id="last_name" name="last_name" autocomplete="off">
</div>

</body>
</html>

Answer 1

尝试这个简单的事情，只是将其与返回数组的空间分开

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
    <input type="text" value="10">
    <input type="range" min="0" value="0" max="18" step="1">
</div>
<div class="box">
    <input type="text" value="10">
    <input type="range" min="0" value="0" max="18" step="1">
</div>

Answer 2

没有一次拆分功能，但是您可以这样做：

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("input").focusout(function() {
        var names = $(this).val().split(" ");
        var firstName = names.shift();
        var lastName = names.join(" ")
        $('input#first_name').val(firstName);
        $('input#last_name').val(lastName);
      });
    });
  </script>
</head>

<body>

  <div style="border: 1px solid black;padding:10px;">
    Name: <input id="name" name="name" autocomplete="off">
    <input type="hidden" id="first_name" name="first_name" autocomplete="off"><br>
    <input type="hidden" id="last_name" name="last_name" autocomplete="off">
  </div>

</body>

</html>

Answer 3

String#substr和String#indexOf可用于在第一个空格之前和第一个空格之后获取字符串。

注意：为了演示起见，我将隐藏的输入保留为text

$(document).ready(function() {
  $("input#name").blur(function() {
    var name = $(this).val();


    var fname = name.substr(0, name.indexOf(' '));
    var lname = name.substr(name.indexOf(' ') + 1);
    $('input#first_name').val(fname);
    $('input#last_name').val(lname);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div style="border: 1px solid black;padding:10px;">
  Name: <input id="name" name="name" autocomplete="off">
  <input type="text" id="first_name" name="first_name" autocomplete="off"><br>
  <input type="text" id="last_name" name="last_name" autocomplete="off">
</div>

Answer 4

尝试关注

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("input").focusout(function(){
        // splitting the value by space which returns an array
        let temp = $(this).val().trim().split(" "); 
        // the firstr value as first name and removing it from array 
        let first_name = temp.shift();
        // Joining the remaining values by space and setting it as second name 
        let last_name = temp.join(" ");
    	$('input#first_name').val(first_name);
      $('input#last_name').val(last_name);
      temp
    });
});
</script>
</head>
<body>

<div style="border: 1px solid black;padding:10px;">
  Name: <input id="name" name="name" autocomplete="off">
	<input type="hidden" id="first_name" name="first_name" autocomplete="off"><br>
	<input type="hidden" id="last_name" name="last_name" autocomplete="off">
</div>

</body>
</html>

Answer 5

您可以使用split(/\s+/)来创建将在输入框中输入的单词数组，然后将first_name设置为array的第一个元素，其余所有其他单词将进入last_name：

$(document).ready(function() {
  $("input").focusout(function() {
    var nameArr = $(this).val().split(/\s+/);
    var first_name = nameArr[0];
    //remove first name
    nameArr.shift();
    var last_name = nameArr.join(' ');
    $('#first_name').val(first_name);
    $('#last_name').val(last_name);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="border: 1px solid black;padding:10px;">
  Name: <input id="name" name="name" autocomplete="off">
  <input type="hidden" id="first_name" name="first_name" autocomplete="off"><br>
  <input type="hidden" id="last_name" name="last_name" autocomplete="off">
</div>

Answer 6

尝试以下代码：

$(function() {
  $("#name").on('input', function() {
    var parts = $.trim($(this).val()).split(/\s+/); /* break apart on whitespaces */
    $('#first_name').val(parts.shift()); /* get the first word */
    $('#last_name').val(parts.join(' ')); /* join the rest with space */
  });
});

将JavaScript中的字符串拆分为2个字段

6 个答案: