Question

我有一个带有文本框的表单，然后是另一个带有三个文本框的表单。当我单击按钮时，我在第一个文本框中输入的文本（id =“logoName”）应该在其他三个（ids v1 - v3）中可见。我尝试了下面这个，但是当我点击按钮时，第一个框中的文字就会消失，而不是在其他框中显示...我做错了什么？非常感谢你的帮助!!!

JS

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>

Answer 1

您遇到了两个基本错误：

1-您没有阻止提交按钮和

的默认操作

2-您没有正确地将sync功能分配给按钮

像这样：

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

Answer 2

你有一些选择：

你可以将sync()设置为你的按钮，这样它就不会提交你的表单，因为这会重新加载整个页面而你从0开始，这就是文本消失的方式。

你可以将你的按钮放在表格标签之外。

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

dataURLtoBlob()

快乐编码

Answer 3

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

button.onclick = sync();

应该是

button.onclick = sync;

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

其次，在表单中使用button标记时，它似乎会自动解释为“提交”按钮。单击它时，您的表单将“发布”到任何地方，因此该值将消失。尝试将button标记替换为input标记type button。

小提琴

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

同步文本框（表单输入）

3 个答案: