Вставка текста поля ввода в текстовое поле с помощью JavaScript - PullRequest
Новая
       10

Вставка текста поля ввода в текстовое поле с помощью JavaScript

1 голос
/ 12 мая 2009

Мне нужно вставить текст / строку из поля ввода в текстовую область, в которой уже есть текст. Вставленная строка должна находиться в позиции курсора, и требуется кнопка для вставки.

Есть ли способ сделать это с помощью JavaScript?

Спасибо заранее

P.S. текст / строка, которая должна быть вставлена, извлекается из базы данных с помощью PHP

Ответы [ 2 ]

7 голосов
/ 12 мая 2009

@ Пример кода Kamia находится на правильном пути. Вот полная реализация для вашего теста. Исходя из вашего описания, я предполагаю, что в вашем реальном коде у вас, вероятно, будет какой-то тип поиска с использованием php, который будет извлекать текст для добавления в текстовую область. Если это так, то это потребует некоторого типа Ajax-вызова на сервер. Я бы порекомендовал использовать для этого функции jjuery 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>
3 голосов
/ 12 мая 2009

Дед,

от некоторого базового поиска в Google: 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>

Надеюсь, это поможет вам

C ya

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...