我想在html中连接两个文本字段，并在其他测试字段中显示结果

我有这样的代码

First name : <input type="text" name="txtFirstName" /> <br><br>
Last name : <input type="text" name="txtLastName" /> <br><br>
Full name : <input type="text" name="txtFullName"  > <br><br>

名字：


姓氏：


全名：

---

如果我在名字文本框中给出abc，在姓氏文本框中给出def，则结果应在全名文本框中显示为abcdef。如何做到这一点？

要处理HTML，您需要使用JavaScript。有很多很好的教程，比如w3schools.com

---

您可能还想查看jQuery，它使这种操作变得更加简单和直接。

绑定一个函数，该函数为您的输入生成keyup事件的全名

<script type="text/javascript">
    function generateFullName()
    {
        document.getElementById('fullName').innerText = 
            document.getElementById('fName').value + ' ' + 
            document.getElementById('lName').value;
    }
</script>

First Name <input type="text" id="fName" onkeyup="generateFullName()" /><br/>
Last Name <input type="text" id="lName" onkeyup="generateFullName()" /><br/>
Full Name <span id="fullName" />

函数generativerlname（）
{
document.getElementById（'fullName'）。innerText=
document.getElementById（'fName'）。值+''
document.getElementById（'lName'）.value；
}
名字

姓氏

全名

---

如果您愿意，您也可以将全名作为输入，并设置其值。

使用表单

oninput

属性使用少量内联JavaScript实际上非常简单

<form oninput="txtFullName.value = txtFirstName.value +' '+ txtLastName.value">
  First name : <input type="text" name="txtFirstName" /> <br><br>
  Last name : <input type="text" name="txtLastName" /> <br><br>
  Full name : <input type="text" name="txtFullName"  > <br><br>
</form>

名字：


姓氏：


全名：

---

我还建议使用HTML5

元素，而不是第三个输入。要了解更多信息，请从这里开始：

您可以使用以下代码：

 <script type="text/javascript">
   function generateFullName()
   {
        document.getElementById('txtFullName').value = 
        document.getElementById('fName').value + ' ' + 
        document.getElementById('lName').value;

   }
</script>

First Name <input type="text" id="fName"  /><br/>
Last Name <input type="text" id="lName" oninput="generateFullName()" /><br/>
Full name  <input type="text" id="txtFullName" name="txtFullName"  > <br><br>

函数generativerlname（）
{
document.getElementById（'txtFullName'）。值=
document.getElementById（'fName'）。值+''
document.getElementById（'lName'）.value；
}
名字

姓氏

全名

另外，您也可以选择onblur，而不是oninput事件。

试试这个（使用jQuery）。它会起作用的。但是如果单个字段为空，则fullname字段将保持为空

<script>
    $(document).ready(function(){
   $("fullName").focus(function(){
        var fullname = $("fName").val() + $("lName").val();
        $("fullName").val(fullname);
});
});
</script>

First Name <input type="text" id="fName" /><br/>
Last Name <input type="text" id="lName" /><br/>
Full Name <span id="fullName"/>

$（文档）.ready（函数（）{
$（“全名”）.focus（函数（）{
var fullname=$（“fName”）.val（）+$（“lName”）.val（）；
$（“全名”）.val（全名）；
});
});
名字

姓氏

全名

如果你问这样一个问题（一个没有任何研究成果的问题），你不可能不期望被否决。这样的问题削弱了网站的质量，基本上是不受欢迎的。@enhzflep好吧，你是对的，但他对网站非常陌生，我们可以让他放松一下。@TomerW-这就是为什么我没有在没有解释问题及其影响的情况下否决投票的原因。如果这让我觉得很糟糕，很高兴你是个更好的人。¯\_(ツ)_/“@enhzflep我一直被否决，因为我是一个新手，即使我在发布问题之前花了很多精力试图解决问题。Stackoverflow不像其他stack exchange社区那样工作，因为许多程序员很难理解新手和学习编程的人很难理解阅读文档，并从专家的帮助中受益匪浅。我将很快就此写一篇文章。@DaniPaniz-我在某种程度上理解jayadeep、你自己和其他人所感受到的痛苦。我当然天生就不会阅读文档和编写程序。20年前，我也犯过许多同样的错误，并因此而被烧死。然而，事实上在创建帐户和激怒“本地人”之前，人们可以匿名阅读stackoverflow，熟悉当地的文化和期望。阅读文档就像是一种锻炼——你必须自己动手，我对你的想法很感兴趣，并且希望在你发表文章时（或者现在，如果已经完成的话）能链接到你的文章tq..我不能只使用html来实现这一点吗…不，您需要JavaScript以这种方式操作页面上的内容（而不刷新页面）不，HTML只是一种标记，实际上不能做任何事情。它不是一种编程语言，它是一种标记语言。tq用于回复，但我在输入名字和姓氏字段时直接获得输出。按submit按钮EA后是否可以获得连接字符串，只需将

oninput

更改为

o即可nsubmit

（如果您实际上不想提交表单，请添加

返回false

）。名字：

姓氏：

全名：

我没有得到输出。提交

onsubmit=“txtFullName.value=txtffirstname.value+”+txtflastname.value；返回false；“