javascript into textbox

i have these codes so that i can select a colour and size of the text... and email/url and img

few things i cant do really...

1. the email/url and link starts itself on a new line rather than where the curser currently is... how can i edit the code to do this?

2.the size and the colour works ok but if i highlight the text how can i add the tags around the text??


function getAddress() {
                   var anAddress = prompt("Please type the ADDRESS to your LINK here.", "www.");
                   if (anAddress) {
                  document.getElementById('inputforum').value+='\n'+anAddress+'';
                          }
                                 }
function getemail(){
                var anemail = prompt("Please type your EMAIL address here.", "somebody@somewhere.com");
				if (anemail) {
                document.getElementById('inputforum').value+='\n'+anemail+'';
        }}
function getimg(){
                var animg = prompt("Please enter the URl of you IMAGE.", "http://");
				if (animg) {
                document.getElementById('inputforum').value+='\n[img]'+animg+'[/img]';
        }}
 
function setColor(color) {
        var textbox = document.getElementById('inputforum');
        textbox.value += "[color=" + color + "][/color]";
}
function setsize(size) {
        var textbox = document.getElementById('inputforum');
        textbox.value += "[size=" + size + "][/size]";
}

Open in new window

runnerjpAsked:
Who is Participating?
 
Tomarse111Connect With a Mentor Commented:
It didn't work as you still had a 'fred' in on line 23 above. Going back to this though it wouldn't work as you wanted it to as it would simply add on the selected text wrapped in [color][/color] tags not replace it. SO see below for a working example:
<script type="text/javascript">
	function setColor(color) {
 
		var seltxt=''
		var textbox = document.getElementById('inputforum');			
	
		if (document.selection) { // for IE			
			textbox.focus();			
			var sel = document.selection.createRange();
			sel.text = '[color=' + color + ']' + sel.text + '[/color]';
		} else if (typeof textbox.selectionStart != 'undefined') { // for FF, Opera etc...
			var len = textbox.value.length;
			var start = textbox.selectionStart;
			var end = textbox.selectionEnd;
			var sel = textbox.value.substring(start, end);
			var replace = '[color=' + color + ']' + sel + '[/color]';
			textbox.value = textbox.value.substring(0,start) + replace + textbox.value.substring(end,len);
						
 		}
	}        
</script>
            
<textarea id="inputforum"></textarea>
<input type="button" onclick="setColor('red')" value="make Red" />
            

Open in new window

0
 
Tomarse111Commented:
If i understand correctly:

1. The line that reads:
document.getElementById('inputforum').value+='\n'+anemail+'';
The \n is forcing this onto a new line just whip that out. SO it would be
document.getElementById('inputforum').value+=anemail;

2. Not sure what you mean on point 2
0
 
runnerjpAuthor Commented:
thanks... point 2 means this

  document.getElementById('inputforum').value+='[img]'+animg+'[/img]'; -- here the img tages are wraped around the text..

so  [img]this image[/img]


where as my colours on does not... i would like it to do this


this text wants to be red...  so i higlight the text and click red and it does this  [color=red]this text wants to be red[/color]

at the mometn it does this this text wants to be red[color=red][/color]
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
Tomarse111Commented:
OK so you need to include the selected text in your output. To get that us the below:

function setColor(color) {
 
var seltxt=''
		if (document.selection) { // for IE
		seltxt=document.selection.createRange().text;
		} else if (typeof document.getElementById('fred').selectionStart != 'undefined') { // for FF, Opera etc...
		seltxt=document.getElementById('fred').value.substring(document.getElementById('fred').selectionStart, document.getElementById('fred').selectionEnd);
 
        var textbox = document.getElementById('inputforum');
        textbox.value += "[color=" + color + "]"+seltxt+"[/color]";
}
 
 
 
 
 
		} 

Open in new window

0
 
Tomarse111Commented:
But obviously replace fred with inputforum :P My testing name :D
0
 
runnerjpAuthor Commented:
i used the code as u showed me and it does not work!

   function getAddress() {
                   var anAddress = prompt("Please type the ADDRESS to your LINK here.", "www.");
                   if (anAddress) {
                  document.getElementById('inputforum').value+='[url]'+anAddress+'[/url]';
                          }
                                 }
function getemail(){
                var anemail = prompt("Please type your EMAIL address here.", "somebody@somewhere.com");
				if (anemail) {
                document.getElementById('inputforum').value+='[email]'+anemail+'[/email]';
        }}
function getimg(){
                var animg = prompt("Please enter the URl of you IMAGE.", "http://");
				if (animg) {
                document.getElementById('inputforum').value+='[img]'+animg+'[/img]';
        }}
		function setColor(color) {
 
var seltxt=''
                if (document.selection) { // for IE
                seltxt=document.selection.createRange().text;
                } else if (typeof document.getElementById('inputforum').selectionStart != 'undefined') { // for FF, Opera etc...
                seltxt=document.getElementById('inputforum').value.substring(document.getElementById('fred').selectionStart, document.getElementById('inputforum').selectionEnd);
 
        var textbox = document.getElementById('inputforum');
        textbox.value += "[color=" + color + "]"+seltxt+"[/color]";
} 
 
 
 
                } 
 
 
function setsize(size) {
        var textbox = document.getElementById('inputforum');
        textbox.value += "[size=" + size + "][/size]";
}
 
function initialise() {
var element = document.getElementById('element-id');
 
if (element && element.style)
element.style.display = 'none';
}
 
function toggleDisplay(element) {
var style;
 
if (typeof element == 'string')
element = document.getElementById(element);
if (element && (style = element.style))
style.display = (style.display == 'none') ? '' : 'none';
}
 
if (!document.getElementById)
document.getElementById = function() {return null;};
 
 
function wrapText(el, openTag, closeTag) {
if (el.setSelectionRange) {
// W3C/Mozilla
el.value = el.value.substring(0,el.selectionStart) + openTag + el.value.substring(el.selectionStart,el.selectionEnd) + closeTag + el.value.substring(el.selectionEnd,el.value.length);
}
else if (document.selection && document.selection.createRange) {
// IE code goes here
el.focus(); //or else text is added to the activating control
var range = document.selection.createRange();
range.text = openTag + range.text + closeTag;
}
}

Open in new window

0
 
Tomarse111Commented:
Did this work for you?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.