Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Inserting character into textarea of opener from a popup - advice

Status
Not open for further replies.

ianhi

Programmer
Joined
Jun 9, 2006
Messages
2
Location
GB
Hi all,

I'm trying to create a simple 'insert special characters' function. The idea is that a user has a textarea in the main window and a button. When they press the button, a popup is opened that shows a selection of special characters. When they click on a character, it is inserted at the cursor point in the main window text area.

So far it works perfectly in Firefox but in IE I cannot get the javascript to recognise the textarea. The full code follows at the bottom but the problem lies in the fact that document.selection.createRange().text; doesnt work when called from a popup and I cannot see how to do it. Any thoughts?

Ta very much, IH

Full code:
var insertHTML = {
buildUpdate: function(id) {
if(self.opener) {
var element = self.opener.document.getElementById(id);
} else {
var element = document.getElementById(id);
}
return element;
},

storeCaret: function(selec,id,type) {
if (isMozilla) {
// Firefox
// code ommited for clarity

} else {
oField = insertHTML.buildUpdate(id);
if(self.opener) {
//WHAT TO PUT HERE
} else {
var str = document.selection.createRange().text;
}
if (str.length>0) {
// if we have selected some text,
var sel = document.selection.createRange();
if (type) {
// special character
sel.text = "&" + selec + ";";
} else {
sel.text = "<" + selec + ">" + str + "</" + selec + ">";
}
sel.collapse();
sel.select();
} else {
oField.focus(oField.caretPos);
oField.focus(oField.value.length);
oField.caretPos = document.selection.createRange().duplicate();

var bidon = "%~%"; // needed to catch the cursor position with IE
var orig = oField.value;
oField.caretPos.text = bidon;
var i = oField.value.search(bidon);

if (type) {
// special character
oField.value = orig.substr(0,i) + "&" + selec + ";" + orig.substr(i, oField.value.length);
} else {
oField.value = orig.substr(0,i) + "<" + selec + "></" + selec + ">" + orig.substr(i, oField.value.length);
}

var r = 0;
for(n = 0; n < i; n++) {
if(regexp.test(oField.value.substr(n,2)) == true)
{
r++;
}
};
if (type) {
// special character
pos = i + 1 + selec.length - r;
} else {
pos = i + 2 + selec.length - r;
}

// re-format the textarea & move the cursor to the correct position
var r = oField.createTextRange();
r.moveStart('character', pos);
r.collapse();
r.select();
//close the popup if open
if (self.opener) {
window.close(this);
}
}
}
},
}
 
Instead of using a standard popup, you might create a "popup" using activex or java.

Or better yet, try using a CSS layer and make it visible when needed. That ought to solve your problem, since technically all of the functionality would be in the same page. Options for styling the appearance of the layer are potentially limitless.

Let me know what approach you take & how you solve this problem. I'm very curious to see how things turn out.





Greg Norris
Software Developer & all around swell guy


__________________________________________________
Constructed from 100% recycled electrons.
 
For some reason it never occured to me to put all the functionality into a CSS layer, having looked at how FCK editor and similar do it I was focussed on a JS solution.

As it happens I (finally) solved it, but next time will try your CSS suggestion.
So, heres the full code I used, tested on a PC with FF and IE6, no idea what would happen on a Mac though! To work you need to create a page in the same folder as the js file and then call either like this:

onClick="insertHTML.storeCaret('i', 'title'); return false"
where i is the HTML tag you want to get inserted (e.g. i will automatically install <i></i> around your text and title is the id of the field into which you want the tags to go.

OR

onClick="insertHTML.openSCWindow('components/com_abstracts/js/specialchar.php'); return false" from the main window to open your popup where the argument passed is the URL to the file to appear in your popup. Then from the popup simply add:
onClick="insertHTML.storeCaret('chi','title','sChar'); return false" to your link.
Here, chi is the special character I want to be inserted (will insert as &chi;), title is the ID of the field into which the insertion should be made and sChar is just to ensure the type variable gets set in the storeCarat function.

A long post, but it might be helpful to someone. Cheers, ian.

--- (long) code follows ---

var insertHTML = {
buildUpdate: function(id) {
if(self.opener) {
var element = self.opener.document.getElementById(id);
} else {
var element = document.getElementById(id);
}
return element;
},

openSCWindow: function(url) {
//opens up the special characters popup window

var newwindow = '';

if (!newwindow.closed && newwindow.location) {
newwindow.location.href = url;
} else {
newwindow=window.open(url,'specialchars','height=200,width=210');
if (!newwindow.opener) newwindow.opener = self;
}
if (window.focus) {
newwindow.focus()
}
return false;
},

storeCaret: function(selec,id,type) {
if (isMozilla) {
// Firefox
oField = insertHTML.buildUpdate(id);
objectValue = oField.value;
objectValueStart = objectValue.substring( 0 , oField.selectionStart );
objectValueEnd = objectValue.substring( oField.selectionEnd , oField.textLength );
objectSelected = objectValue.substring( oField.selectionStart ,oField.selectionEnd );

if (type) {
// special character
oField.value = objectValueStart + "&" + selec + ";" + objectSelected + objectValueEnd;
} else {
oField.value = objectValueStart + "<" + selec + ">" + objectSelected + "</" + selec + ">" + objectValueEnd;
}
oField.focus();
if (type) {
// special character
oField.setSelectionRange(objectValueStart.length + selec.length + 2,objectValueStart.length + selec.length + 1);
} else {
oField.setSelectionRange(objectValueStart.length + selec.length + 2,objectValueStart.length + selec.length + 2);
}
//close the popup if open
if (self.opener) {
window.close(this);
}
} else {
oField = insertHTML.buildUpdate(id);
if(self.opener) {
var str = opener.document.selection.createRange().text;
} else {
var str = document.selection.createRange().text;
}
if (str.length>0) {
// if we have selected some text,
if(self.opener) {
var sel = opener.document.selection.createRange();
} else {
var sel = document.selection.createRange();
}
if (type) {
// special character
sel.text = "&" + selec + ";";
} else {
sel.text = "<" + selec + ">" + str + "</" + selec + ">";
}
sel.collapse();
sel.select();
} else {
oField.focus(oField.caretPos);
oField.focus(oField.value.length);
if(self.opener) {
oField.caretPos = opener.document.selection.createRange().duplicate();
} else {
oField.caretPos = document.selection.createRange().duplicate();
}
var bidon = "%~%"; // needed to catch the cursor position with IE
var orig = oField.value;
oField.caretPos.text = bidon;
var i = oField.value.search(bidon);
if (type) {
// special character
oField.value = orig.substr(0,i) + "&" + selec + ";" + orig.substr(i, oField.value.length);
} else {
oField.value = orig.substr(0,i) + "<" + selec + "></" + selec + ">" + orig.substr(i, oField.value.length);
}
var r = 0;
for(n = 0; n < i; n++) {
if(regexp.test(oField.value.substr(n,2)) == true) {
r++;
}
};
if (type) {
// special character
pos = i + 1 + selec.length - r;
} else {
pos = i + 2 + selec.length - r;
}
// re-format the textarea & move the cursor to the correct position
var r = oField.createTextRange();
r.moveStart('character', pos);
r.collapse();
r.select();
//close the popup if open
if (self.opener) {
window.close(this);
}
}
}
},
}
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top