使用JavaScript将输入字段文本插入到textarea中

Question

I need to insert a text/string from an input field into text area that already has some text inside. 我需要将输入字段中的文本/字符串插入已经在其中包含一些文本的文本区域。 The inserted string must be in the position of the cursor, and a button for inserting is required. 插入的字符串必须在光标所在的位置，并且需要用于插入的按钮。

Is there a way to accomplish this with JavaScript? 有没有办法用JavaScript做到这一点？

Thx in advance 提前Thx

PS the text/string that should be inserted is fetched from the database with PHP PS使用PHP从数据库中获取应插入的文本/字符串

Answer 1

@Kamia's code sample is on the right track. @Kamia的代码示例在正确的轨道上。 Here's the complete implementation for your test. 这是您测试的完整实现。 Based on your description, I'm assuming that in your real code you will probably have some type of lookup using php that will retrieve text to add to the textarea. 根据您的描述，我假设在您的真实代码中，您可能会使用php进行某种类型的查找，该查找将检索要添加到textarea的文本。 If this is the case, then it will require some type of Ajax call to the server. 如果是这种情况，则将需要对服务器进行某种类型的Ajax调用。 I would recommend using jQuery's Ajax features for that. 我建议为此使用jQuery的Ajax功能 。

<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>

Answer 2

Dede, 德德

from some basic googling :D -> 从一些基本的谷歌搜索：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>

Use the button to add text: 使用按钮添加文本：

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

Hope it helps ya 希望对你有帮助

C ya ç雅

使用JavaScript将输入字段文本插入到textarea中

问题描述

2 个解决方案

解决方案1
7 已采纳 2009-05-11 22:31:05

解决方案2
3 2009-05-11 20:42:40

使用JavaScript将输入字段文本插入到textarea中

问题描述

2 个解决方案

解决方案1 7 已采纳 2009-05-11 22:31:05

解决方案2 3 2009-05-11 20:42:40

解决方案1
7 已采纳 2009-05-11 22:31:05

解决方案2
3 2009-05-11 20:42:40