使用 JavaScript 将输入字段文本插入 textarea答案

【问题标题】：Inserting input field text into textarea with JavaScript使用 JavaScript 将输入字段文本插入 textarea
【发布时间】：2009-05-11 20:39:33
【问题描述】：

我需要将输入字段中的文本/字符串插入到里面已经有一些文本的文本区域。插入的字符串必须在光标所在的位置，并且需要一个插入按钮。

有没有办法用 JavaScript 完成这个？

提前谢谢

附：应该插入的文本/字符串是使用 PHP 从数据库中获取的

【问题讨论】：

标签： php javascript

【解决方案1】：

@Kamia 的代码示例在正确的轨道上。这是您的测试的完整实现。根据您的描述，我假设在您的真实代码中，您可能会使用 php 进行某种类型的查找，该查找将检索文本以添加到 textarea。如果是这种情况，则需要对服务器进行某种类型的 Ajax 调用。为此，我建议使用 jQuery's Ajax features。

<html>
 <head>
  <title>Test Page</title>
  <script type="text/javascript">
    window.onload = function(){
       btn = document.getElementById("btnInsertText");
       myText = document.getElementById("myTextArea");
       text = document.getElementById("textToInsert");
       btn.onclick = function(){
          insertAtCursor(myText, text.value);
       }
    }

    function insertAtCursor(myField, myValue) { 
        //IE support 
        if (document.selection) { 
            myField.focus(); 
            sel = document.selection.createRange(); 
            sel.text = myValue; 
        }
            //Mozilla/Firefox/Netscape 7+ support 
        else if (myField.selectionStart || myField.selectionStart == '0'){  
            var startPos = myField.selectionStart; 
            var endPos = myField.selectionEnd; 
            myField.value = myField.value.substring(0, startPos)+ myValue 
                 + myField.value.substring(endPos, myField.value.length); 
            } else { 
                myField.value += myValue; 
            } 
        }       
    </script>
 </head>
 <body>
   Text To Insert:<input type="text" id="textToInsert" />
   <input type="button" id="btnInsertText" value="Insert Text" /><br/>
   <textarea id="myTextArea" rows="6" cols="50">
      Contrary to popular belief, Lorem Ipsum is not simply random text. 
      It has roots in a piece of classical Latin literature from 45 BC, 
      making it over 2000 years old.
   </textarea>
 </body>
 </html>

【讨论】：

感谢 ichiban 的答案。和 Kamia 一起，你已经完全回答了我的问题，而且它的作用就像一个魅力。在您的代码中需要注意的一件事是 btn.onclick = function(){ insertAtCursor(myTextArea, textToInsert.value); } 应替换为： btn.onclick = function(){ insertAtCursor(myText, text.value);再次感谢，很抱歉，由于我的声誉不佳，无法代表您
一番，路过，因为我不是php程序员，所以没有包括ajax回调等。
Dede- 我输入得太快了，我不必检查它。我对代码进行了更正。即使你不能投票，你实际上可以通过点击复选标记来接受我的回答。

【解决方案2】：

德德，

来自一些基本的谷歌搜索：D ->

 <script type="text/javascript"> 
<!-- 

//myField accepts an object reference, myValue accepts the text strint to add 
function insertAtCursor(myField, myValue) { 
//IE support 
if (document.selection) { 
myField.focus(); 

//in effect we are creating a text range with zero 
//length at the cursor location and replacing it 
//with myValue 
sel = document.selection.createRange(); 
sel.text = myValue; 
} 

//Mozilla/Firefox/Netscape 7+ support 
else if (myField.selectionStart ¦¦ myField.selectionStart == '0') { 

//Here we get the start and end points of the 
//selection. Then we create substrings up to the 
//start of the selection and from the end point 
//of the selection to the end of the field value. 
//Then we concatenate the first substring, myValue, 
//and the second substring to get the new value. 
var startPos = myField.selectionStart; 
var endPos = myField.selectionEnd; 
myField.value = myField.value.substring(0, startPos)+ myValue+ myField.value.substring(endPos, myField.value.length); 
} else { 
myField.value += myValue; 
} 
} 

//--> 
</script>

使用按钮添加文字：

<textarea id="mytext" rows="8" cols="70"></textarea> 
<button onclick="insertAtCursor(document.getElementById('mytext'),'Test text')" valueAdd Test text>

希望对你有帮助

你好

【讨论】：

谢谢卡米亚，真的很有帮助。对不起，由于我的声誉低，我不能代表你。再次感谢
dede，不是为了那个，旨在帮助他人并被帮助，这就是 stackoverflow ;) 很高兴我能帮助你。
既然我现在可以，我也+1