我想在 html 中连接两个文本字段并在其他测试字段中显示结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18374867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I want to concatenate two text fields in html and display the result in other test field
提问by jayadeep
I have my code like this
我有这样的代码
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>
if i give abc in first name text box and def in last name text box the result should be displayed as abcdef in full name text box. How to do this?
如果我在名字文本框中给出 abc，在姓文本框中给出 def，结果应该在全名文本框中显示为 abcdef。这该怎么做？
回答by pawel
It's actually quite simple with a tiny bit of inline JavaScript using the form oninputattribute.
它实际上非常简单，只需使用 formoninput属性的一点内联 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>
I'd also suggest using HTML5 <output>element instead of third input. To learn more start here: http://html5doctor.com/the-output-element/
我还建议使用 HTML5<output>元素而不是第三个输入。要了解更多信息，请从这里开始：http: //html5doctor.com/the-output-element/
回答by Tomer W
Bind a function that generates the full name on keyup events for your inputs...
绑定一个函数，为您的输入生成键盘事件的全名...
<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" />
if you want, you can have the FullName as a input too, and set it's Value.
如果需要，您也可以将 FullName 作为输入，并将其设置为 Value。
回答by Kaustav Banerjee
Try this (using jQuery). it will work. But the fullname field will remain empty if the individual fields are empty
试试这个（使用 jQuery）。它会起作用。但是如果单个字段为空，则全名字段将保持为空
<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"/>
回答by Emil Lundberg
For manipulating HTML you'll need to use JavaScript. There are tons of good tutorials out there, for example on w3schools.com.
要操作 HTML，您需要使用 JavaScript。那里有很多好的教程，例如在 w3schools.com 上。
You may also want to check out jQuery, which makes this kind of manipulations a lot easier and more straightforward.
您可能还想查看 jQuery，它使这种操作变得更加简单和直接。
回答by shemy
you can use the below code for that:
您可以使用以下代码：
<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>
Also, instead of oninput event , you can opt for onblur also.
此外，您也可以选择 onblur 而不是 oninput event 。
