Javascript - 使用按钮将文本从一个字段复制到另一个字段

时间:2014-07-28 04:55:47

标签: javascript html

我试图弄清楚如何使用按钮将文本从一个文本字段插入另一个文本字段。 这就是我到目前为止所做的:

function copy(ID_value) {
    var textToCopy = document.getElementById(ID_value).innerHTML;
    var whereToCopy = document.getElementById("text");
    whereToCopy.value += textToCopy;
}

HTML

<div id="opt">
    <BUTTON id="1"onClick="copy(1);"> Option 1</BUTTON>
    <BUTTON id="11"onClick="copy(11);"> Option 2</BUTTON><br>
    <BUTTON id="2"onClick="copy(2);"> Option 3</BUTTON> or 
    <TEXTAREA ID="name" style="height:25px; width:300px;"></TEXTAREA>
    <BUTTON id="3"onClick="copy(name);">Send</BUTTON><br>


    <BUTTON id="4"onClick="copy(4);">  Option 4</BUTTON>
    <BUTTON id="5"onClick="copy(5);"> Option 5</BUTTON>
    <BUTTON id="6"onClick="copy(6);"> Option 6</BUTTON>
    <BUTTON id="7"onClick="copy(7);"> Option 7</BUTTON>
    <BUTTON id="8"onClick="copy(8);"> Option 8</BUTTON>
    <BUTTON id="9"onClick="copy(9);"> Option 9</BUTTON>
    <BUTTON id="10"onClick="copy(10);"> Option 10</BUTTON>
<p />
</div>
<TEXTAREA ID="text" style="height:100px; width:600px;">
</TEXTAREA>

就像按钮一样,我需要“发送”按钮以小字段发送文本,以任何给定的顺序发送到大字段(就像每个选项按钮如何将文本插入到大字段中一样间距无论秩序如何)

非常感谢任何帮助。

6 个答案:

答案 0 :(得分:1)

你的问题有两个问题。

1)您正在传递name而不是"name",因此它会说nameundefined

2)由于textbox具有属性value以获取其内容,因此您的功能无效。

保持copy功能不变。再添加一项copyFromTextBox功能,并在send按钮click上调用该功能。

<BUTTON id="3"onClick="copyFromTextbox();">Send</BUTTON><br>

function copyFromTextbox(id){
    var textToCopy = document.getElementById('name').value;
    var whereToCopy = document.getElementById("text");
    whereToCopy.value += textToCopy;    
}

答案 1 :(得分:0)

您要做的只是将一个文本字段的值复制到另一个文本字段中。你可以这样做:

function copyToAnother()
{
var text1 = document.getElementById(id_of_first_text_field);
var text2 =document.getElementById(id_of_second_text_field);
text2.value = text1.value; // copy value of Ist field into second Field
}

然后在你的复制按钮的onclick动作中提供该功能。

答案 2 :(得分:0)

这里的问题是您将数字而不是字符串传递给复制功能。

copy(1)更改为copy('1'),事情就会奏效。

答案 3 :(得分:0)

试试这段代码,这是一个类似于你的问题的程序

    <html>
    <head>
    <script>


        function copy_data(val){
         var a = document.getElementById(val.id).value
         document.getElementById("text_to").value=a
        }    
    </script>
    </head>
    <TEXTAREA ID="text_from" style="height:100px; width:600px;">

    </TEXTAREA>

    <TEXTAREA ID="text_to" style="height:100px; width:600px;">

    </TEXTAREA>
    <button onclick=copy_data(text_from)>Copy</button>

    <html>

答案 4 :(得分:0)

我测试桌面浏览器:Firefox,Chrome,Safari。

<BUTTON id="3"onClick="if(document.getElementById('name').value!='')
    text.value+=' '+document.getElementById('name').value">Send</BUTTON>

for(i=0;i<10;i++)document.querySelectorAll('button')[i].onclick=function(){
    text.value+=this.innerHTML};
snd.onclick=function(){if(document.getElementById('name').value!='')
    text.value+=' '+document.getElementById('name').value}
<div id="opt">
   <button> Option 1</button>
   <button> Option 2</button><br>
   <button> Option 3</button> or 
   <textarea id="name" style="height:25px;width:300px"></textarea>
   <input type="button" id="snd" value="Send"/><br>
   <button> Option 4</button>
   <button> Option 5</button>
   <button> Option 6</button>
   <button> Option 7</button>
   <button> Option 8</button>
   <button> Option 9</button>
   <button> Option 10</button>
</div>
<br><br><textarea id="text" style="height:100px;width:600px"></textarea>

名。 -不行。这个问题在2014年7月28日4:55问为什么这个问题在主页上是最重要的?

答案 5 :(得分:-1)

function copy() {
    var areaA = document.getElementById("areaA");
    var areaB = document.getElementById("areaB");
    var valueA = areaA.value;
    areaB.value = valueA;
}

只需快速查看一下你需要在getElementById中添加“”, 使用.value而不是innerHTML应该可以找到。

这是一个例子。 http://jsfiddle.net/6e67Y/