📌  相关文章
📜  jquery 将两个输入字段复制到一个中,中间有空格 - Javascript (1)

📅  最后修改于: 2023-12-03 14:43:17.523000             🧑  作者: Mango

jQuery实现将两个输入字段复制到一个中，中间有空格 - Javascript

本文将介绍如何使用jQuery将两个输入字段复制到一个中，并加入一个空格。

实现步骤

1.首先，我们需要在html中准备好两个输入框及目标输入框，例如：

<input type="text" id="input1" name="input1">
<input type="text" id="input2" name="input2">
<input type="text" id="target" name="target">

2.接下来，我们需要编写jQuery代码，将两个输入框的值合并到目标输入框中。具体代码如下：

$(document).ready(function(){
    $("#input1, #input2").keyup(function(){
        var input1 = $("#input1").val().trim();
        var input2 = $("#input2").val().trim();
        $("#target").val(input1 + " " + input2);
    });
});

3.解释一下代码：

  • 将文档加载完成后，绑定keyup事件处理函数。当input1或input2的值被修改时，执行该函数。
  • 从input1和input2获取值并去除首尾空格。
  • 将两个值拼接在一起，中间加上一个空格。
  • 将拼接结果赋值给target输入框。

4.最后，我们需要在页面中引入jQuery库文件，例如：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
完整代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery实现将两个输入字段复制到一个中，中间有空格 - Javascript</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="input1" name="input1">
    <input type="text" id="input2" name="input2">
    <input type="text" id="target" name="target">
    <script>
        $(document).ready(function(){
            $("#input1, #input2").keyup(function(){
                var input1 = $("#input1").val().trim();
                var input2 = $("#input2").val().trim();
                $("#target").val(input1 + " " + input2);
            });
        });
    </script>
</body>
</html>
结语

本文介绍了使用jQuery将两个输入字段复制到一个中，中间有空格的方法。希望对你有所帮助。