Question

我需要将文本值从一个文本字段输入复制到另一个文本字段。我怎样才能做到这一点？我创建了一个js小提琴，它具有一个文本表单，一旦单击编辑详细信息，就会弹出另一个表单。在这种新形式下，我希望能够在当前存在的任何文本字段中输入文本，然后在单击保存时输入文本。新输入的文本将被移动/复制/传输到屏幕上的原始文本字段。

这是jsfiddle-https://jsfiddle.net/xsuh6pf7/2/

 <h1>Your Name and Address</h1>
    <form action="/">
      <div class="nameDiv">
        Name: <input type="textbox" name="firstname" title="name" id="name">

        <div class="dotOne"> ? </div>
        <span class="nameHelp"> Please enter first and last name   </span>

      </div>
      <br>
      <div class="addressDiv">
        Address: <input type="text" name="lastname" id="address">
        <div class="dotTwo">?</div>
      </div>
      <br>
      <div class="emailDiv">
        Email:
        <input type="text" name="Email" class="email">
        <span class="dotThree">?</span>
      </div>
      <br>
      <div class="numberDiv">
        Phone number:
        <input type="text" name="Phone number" class="number">
        <span class="dotFour">?</span>
      </div>
      <br>
    </form>
    <button class="btn" onclick="openForm()">Edit Details</button>

    <div id="container">
      <button class="tablink" onclick="openPage('Name', this, 'grey')" id="defaultOpen">Name</button>
      <button class="tablink" onclick="openPage('Address', this, 'grey')">Address</button>

      <div id="Name" class="tabcontent">

        <form>
          <div class="nameDiv">
            Title: <input type="text" name="firstname" title="name" class="name">
          </div>
          <br>
          <div class="addressDiv">
            Name: <input type="text" name="lastname" id="nameTransfer">
          </div>
          <br>
          <div class="emailDiv">
            Surname:
            <input type="text" name="Email" id="LastNameTransfer">
          </div>
          <br>
          <div class="numberDiv">
            Email Address:
            <input type="text" name="Phone number" class="number">
          </div>
          <br>
          <div class="numberDiv">
            Phone number:
            <input type="text" name="Phone number" class="number">
          </div>
          <button type="submit" id="save-btn" onclick="moveContent()">Save</button>
        </form>
      </div>

      <div id="Address" class="tabcontent">
        <form>
          <div class="nameDiv">
            Line 1: <input type="text" name="firstname" value="Mickey" title="name" class="name">
          </div>
          <br>
          <div class="addressDiv">
            Line 2: <input type="text" name="lastname" value="Mouse" class="address">
          </div>
          <br>
          <div class="emailDiv">
            Suburb:
            <input type="text" name="Email" value="Email" class="email">
          </div>
          <br>
          <div class="numberDiv">
            State:
            <input type="text" name="Phone number" value="Phone number" class="number">
          </div>
          <br>
          <div class="numberDiv">
            Country:
            <input type="text" name="Phone number" value="Phone number" class="number">
          </div>
          <button class="save-btn" onclick="">Save</button>
        </form>
      </div>
    </div>

Answer 1

您可以使用

document.getElementbyId（“ textfieldToTransfer”）。value = document.getElementbyId（“ textfieldOfData”）。value;

关于按钮的功能。

Answer 2

我认为阻止其他答案/评论对您有用（使用$options）的问题是，您的document.getElementById()实际上没有<input />属性-仅{{1} }，例如

id

您可能需要添加name才能实际执行以下操作：

<input type="text" name="firstname" value="Mickey" title="name" class="name">

或者，您可以使用document.querySelector()选择合适的id="firstname"，而无需添加document.getElementById("firstname").value = document.getElementById("firstnameTransfer").value属性，例如：

<input />

Answer 3

在您的Javascript中，您可以尝试添加

document.getElementById("name").onchange = function(){
    nameChange();
}

function nameChange(){
    document.getElementById("nameTransfer").value = document.getElementById("name").value;
}

这当然仅适用于名称输入。

如何使用BTN将文本从一个文本字段输入复制到另一文本字段？

3 个答案: