[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

javascript into textbox

Posted on 2008-11-13
7
Medium Priority
?
675 Views
Last Modified: 2012-05-05
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

0
Comment
Question by:runnerjp
  • 5
  • 2
7 Comments
 
LVL 15

Expert Comment

by:Tomarse111
ID: 22949466
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
 

Author Comment

by:runnerjp
ID: 22949599
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
 
LVL 15

Expert Comment

by:Tomarse111
ID: 22949865
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 15

Expert Comment

by:Tomarse111
ID: 22950324
But obviously replace fred with inputforum :P My testing name :D
0
 

Author Comment

by:runnerjp
ID: 22951819
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
 
LVL 15

Accepted Solution

by:
Tomarse111 earned 2000 total points
ID: 22952057
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
 
LVL 15

Expert Comment

by:Tomarse111
ID: 22958693
Did this work for you?
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question