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

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

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）。它会工作。但如果各个字段为空，则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"/>

Answer 4

对于操纵HTML，您需要使用JavaScript。有很多很好的教程，例如在w3schools.com上。

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

Answer 5

您可以使用以下代码：

 <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事件。

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

5 个答案: