How do I modify my code to collect form input from a popup and insert it into a textarea at cursor location on original page using JavaScript?
Question
The JavaScript shown below inserts form input into a textarea at the current cursor position. The textarea id=mbentry. This works if all code is on the same page.
I want to have a hypertext link on page1.php open a little popup window (page2.php for example) so the user can enter text in the popup, close the window and have the input from the window appear in the textarea (id=mbentry) on the original page. (Note: I currently use GreyBox to create my popup windows.)
How do I accomplish this? (See code below)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page 1</title>
<script type="text/javascript">
window.onload = function()
{
btn = document.getElementById("btnInsertText");
myText = document.getElementById("myTextArea");
title = document.getElementById("insTitle");
url = document.getElementById("insUrl");
ltext = document.getElementById("insLText");
btn.onclick = function()
{
insertAtCursor(myText, title.value, url.value, ltext.value);
}
}
function insertAtCursor(myField, title, url, ltext)
{
//IE support
if (document.selection)
{
myField.focus();
sel = document.selection.createRange();
sel.text = '<a href="'+url+'" title="'+title+'" target="_blank">'+ltext+'</a>';
}
//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)+ '<a href="'+url+'" title="'+title+'" target="_blank">'+ltext+'</a>' + myField.value.substring(endPos, myField.value.length);
}
else
{
myField.value += myValue;
}
}
</script>
</head>
<body>
url: <input type="text" id="insUrl" /><br />
title: <input type="text" id="insTitle" /><br />
linked text: <input type="text" id="insLText" /><br />
<input type="button" id="btnInsertText" value="Insert Link" /><br /><br />
<textarea id="myTextArea" rows="6" cols="50"></textarea>
</body>
</html>
2 answers
solution1
0 2010-07-15 23:37:56
从弹出窗口中，您可以调用window.parent.insertAtCursor(...)
solution2
0 2010-07-16 08:24:30
Thank you for your help.
I wasn't able to get it working using window.parent or top.window (the GreyBox method). After much research I decided to use a hidden div that contains my form input elements. The div appears when an "Insert URL" button is clicked. Because the div is on the same page as the textarea, I don't need to pass the info. back to the parent window anymore. I think showing and hiding a div with the input fields will suffice for now. If I come up with a better method using the GreyBox popup I'll share. Thanks again!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.