Hi
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?
Thx in advance
P.S. the text/string that should be inserted is fetched from the database with PHP
Dede,
from some basic googling :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
@Kamia's code sample is on the right track. 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. If this is the case, then it will require some type of Ajax call to the server. I would recommend using jQuery's Ajax features for that.
<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>