同步文本框（在表单中输入）答案

【问题标题】：Synchronise Textboxes (Input in Form)同步文本框（在表单中输入）
【发布时间】：2015-08-08 19:29:12
【问题描述】：

我有一个带有文本框的表单，然后是另一个带有三个文本框的表单。当我单击按钮时，我在第一个文本框 (id="logoName") 中输入的文本应该在其他三个 (ids v1 - v3) 中可见。我尝试了以下操作，但是当我单击按钮时，第一个框中的文本消失了，而不是显示在其他框中……我做错了什么？非常感谢您的帮助！！！

var logoName = document.getElementById("logoName");
var v1 = document.getElementById("v1");
var v2 = document.getElementById("v2");
var v3 = document.getElementById("v3");
var button = document.getElementById("button");

function sync() {
    v1.value = logoName.value;  
    v2.value = logoName.value;
    v3.value = logoName.value;
}
button.onclick = sync();

CSS

p {
        font-size: 2em;
        float: left;
        margin-right: 2em;  
    }
    .clear {
        clear: both;    
    }
    .overview {
        margin-top: 2em;    
    }
    input[type="text"] {
        font-size: 2em; 
        width: 200px;
    }

HTML

<form>
    <label>Logo-Name</label>
    <input id="logoName" type="text"/>
    <button id="button">synchronise</button>
</form>

<form class="overview">
    <input id="v1" type="text" /> <input id="v2" type="text" /> <input id="v3" type="text" />
</form>

【问题讨论】：

此在给了你一个很好的答案。另见这篇文章：<button> vs. <input type=“button” /> Which to use?

标签： javascript html css forms input

【解决方案1】：

首先，您的 JS 代码在加载时调用该函数：

button.onclick = sync();

应该是

button.onclick = sync;

（您将函数代码分配给事件，而不是函数执行）

其次，当在表单中使用button 标签时，它似乎被自动解释为“提交”按钮。单击它时，您的表单将“发布”到无处，因此该值消失了。尝试将button 标记替换为input 标记与type button。

为你提琴

http://jsfiddle.net/tn91aou1/3/

【讨论】：

【解决方案2】：

你有一些选择：

您可以将 type="button" 设置为您的按钮，这样它就不会提交您的表单，因为这会重新加载整个页面并且您从 0 开始，这样文本就会消失。

你可以把你的按钮放在表单标签之外。

您将sync() 的结果传递给button.onclick，而不是函数。所以，你可以试试

button.onclick = sync

愉快的编码

【讨论】：

【解决方案3】：

您在那里遇到了 2 个基本错误：

1- 你没有阻止提交按钮的默认操作和

2- 你没有正确地为按钮分配sync 函数

像这样：

button.onclick = function() {sync();return false;}

【讨论】：