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

Question

我有这样的代码

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。这个怎么做？

Answer 1

它实际上非常简单，只需一点点内联 JavaScript 就可以使用 formoninput属性。

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

http://jsfiddle.net/RXTV7/1/

我还建议使用 HTML5<output>元素而不是第三个输入。要了解更多信息，请从这里开始：http: //html5doctor.com/the-output-element/

Answer 2

绑定一个函数，为您的输入生成 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" />

如果需要，您也可以将 FullName 作为输入，并将其设置为值。

Answer 3

试试这个（使用 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"/>

Answer 4

您可以为此使用以下代码：

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

此外，您也可以选择 onblur 而不是 oninput event 。

Answer 5

要操作 HTML，您需要使用 JavaScript。那里有很多很好的教程，例如 w3schools.com。

您可能还想查看 jQuery，它使这种操作更容易和更直接。