JavaScript: TextArea

Discussion in 'OT Technology' started by doggfather, Dec 22, 2005.

  1. doggfather

    doggfather New Member

    Joined:
    Aug 6, 2005
    Messages:
    224
    Likes Received:
    0
    I have a textarea which is part of a web application.

    I want to click a [bold] button and when I click the button, it puts in <b> at the end of the textarea, and when I click a [/bold], it puts in a </b> into the textarea.

    How can I use javascript to do this?
     
  2. Joe_Cool

    Joe_Cool Never trust a woman or a government. Moderator

    Joined:
    Jun 30, 2003
    Messages:
    299,482
    Likes Received:
    617
    <input type=button value = "[bold]" onclick = "document.foo.blah.value += '<b>';">
    <input type=button value = "[/bold]" onclick = "document.foo.blah.value += '</b>';">

    <form name=foo>
    <textarea name=blah></textarea>
    </form>
     
  3. doggfather

    doggfather New Member

    Joined:
    Aug 6, 2005
    Messages:
    224
    Likes Received:
    0
    Cool, that works for the bold, italic and underline, how can I modify it so, when i click [​IMG]
     
  4. Aimless

    Aimless Resident drunkey

    Joined:
    Nov 5, 2001
    Messages:
    2,534
    Likes Received:
    0
    Location:
    Wisconsin
    Why don't you just post the whole assignment?
     
  5. CyberBullets

    CyberBullets I reach to the sky, and call out your name. If I c

    Joined:
    Nov 13, 2001
    Messages:
    11,865
    Likes Received:
    0
    Location:
    BC, Canada/Stockholm, Sweden
    ROFL. busted!
     
  6. doggfather

    doggfather New Member

    Joined:
    Aug 6, 2005
    Messages:
    224
    Likes Received:
    0
    <html>
    <body>
    <script type="text/javascript">

    function test() {
    var reply = prompt("type in a value", "")
    }
    </script>



    <div onClick="test()">JavaScript Alert Popup Demo</div>

    <input type=button value = "[bold]" onclick = "document.foo.blah.value += '<b>';">
    <input type=button value = "[/bold]" onclick = "document.foo.blah.value += test().reply.message + '</b>';">


    <form name=foo>
    <textarea name=blah></textarea>
    </form>

    </body>


    </html>


    i'm trying to get it so when I click the [/bold], it posts the value u type in and </b>
     
  7. CyberBullets

    CyberBullets I reach to the sky, and call out your name. If I c

    Joined:
    Nov 13, 2001
    Messages:
    11,865
    Likes Received:
    0
    Location:
    BC, Canada/Stockholm, Sweden
    fixed to xhtml 1.1 standards

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    	<head>
    		<title>Text Formatter</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    		<script type="text/javascript">
    		<!--
    			function setBold(status){
    				if(status == "&lt;strong&gt;"){
    					document.getElementById('bold').innerHTML = "&lt;/strong&gt;";
    					document.getElementById('textbox').value += "<strong>";
    				}else{
    					document.getElementById('bold').innerHTML = "&lt;strong&gt;";
    					document.getElementById('textbox').value += "</strong>";
    				}	
    			}
    			
    			function setItalic(status){
    				if(status == "&lt;italic&gt;"){
    					document.getElementById('italic').innerHTML = "&lt;/italic&gt;";
    					document.getElementById('textbox').value += "<i>";
    				}else{
    					document.getElementById('italic').innerHTML = "&lt;italic&gt;";
    					document.getElementById('textbox').value += "</i>";
    				}	
    			}
    			
    			function setBreak(){
    				document.getElementById('textbox').value += "<br />";
    			}
    			
    			function hyperlink(){
    				var hyperlink = prompt("URL Please:", "http://");
    				var title = prompt("Title Please:", "");
    				document.getElementById('textbox').value += "<a href='"+hyperlink+"'>"+title+"</a>";
    			}
    			
    			function setli(status){
    				if(status == "&lt;li&gt;"){
    					document.getElementById('li').innerHTML = "&lt;/li&gt;";
    					document.getElementById('textbox').value += "\t<li>";
    				}else{
    					document.getElementById('li').innerHTML = "&lt;li&gt;";
    					document.getElementById('textbox').value += "</li>\n";
    				}
    			}
    			
    			function setol(status){
    				if(status == "&lt;ol&gt;"){
    					document.getElementById('ol').innerHTML = "&lt;/ol&gt;";
    					document.getElementById('textbox').value += "<ol>\n";
    				}else{
    					document.getElementById('ol').innerHTML = "&lt;ol&gt;";
    					document.getElementById('textbox').value += "</ol>\n";
    				}
    			}
    			
    			function setul(status){
    				if(status == "&lt;ul&gt;"){
    					document.getElementById('ul').innerHTML = "&lt;/ul&gt;";
    					document.getElementById('textbox').value += "<ul>\n";
    				}else{
    					document.getElementById('ul').innerHTML = "&lt;ul&gt;";
    					document.getElementById('textbox').value += "</ul>\n";
    				}
    			}
    			
    			function preview(htmlCode){
    				htmlCode = htmlCode.replace(/\n/i,"<br />");
    				document.getElementById('prev').innerHTML = htmlCode;
    			}
    		// -->
    		</script>
    		<style type="text/css">
    			#container{
    				width: 500px;
    			}
    			#toolbar, #bottom{
    				padding: 0px 0px 0px 0px;
    				background-color: #EEEEEE;
    				text-align: right;
    				padding: 2px 2px 2px 2px;
    			}
    			#italic{
    				padding: 2px 2px 2px 2px;
    				color: #000000;
    				background-color: #CDCDCD;
    				font-style: italic;
    			}
    			#bold{
    				padding: 2px 2px 2px 2px;
    				color: #000000;
    				background-color: #CDCDCD;
    				font-weight: bold;
    			}
    			#link{
    				padding: 2px 2px 2px 2px;
    				color: #0000BB;
    				background-color: #CDCDCD;
    				text-decoration: underline;
    			}
    			#li, #ol, #ul, #break{
    				padding: 2px 2px 2px 2px;
    				color: #000000;
    				background-color: #CDCDCD;
    			}
    			#preview, #clearText, #clearPrev{
    				padding: 2px 2px 2px 2px;
    				color: #000000;
    				background-color: #CDCDCD;
    				font-weight: bold;
    			}
    			#title{
    				font-size: 24pt;
    				font-weight: bold;
    				text-align: center;
    			}
    			#w3cicon{
    				border: 0px;
    			}
    		</style>
    	</head>
    	
    	<body>
    		<div id="container">
    			<div id="title">
    				Formatter <br />
    				<a href="http://validator.w3.org/check?uri=referer">
    			    	<img src="http://www.w3.org/Icons/valid-xhtml11" id="w3cicon" alt="Valid XHTML 1.1" height="31" width="88" />
    			    </a>
    			</div>
    			<div id="toolbar">
    				Formatting Tools:
    				<span id="bold" onclick="setBold(document.getElementById('bold').innerHTML);">&lt;strong&gt;</span>
    				<span id="italic" onclick="setItalic(document.getElementById('italic').innerHTML);">&lt;italic&gt;</span>
    				<span id="break" onclick="setBreak();">&lt;br /&gt;</span>
    				<span id="link" onclick="hyperlink();">&lt;hyperlink&gt;</span>
    				<span id="ol" onclick="setol(document.getElementById('ol').innerHTML);">&lt;ol&gt;</span>
    				<span id="ul" onclick="setul(document.getElementById('ul').innerHTML);">&lt;ul&gt;</span>
    				<span id="li" onclick="setli(document.getElementById('li').innerHTML);">&lt;li&gt;</span>
    			</div>
    			<div id="body">
    				<textarea id="textbox" cols="59" rows="15"></textarea>
    			</div>
    			<div id="bottom">
    				<span id="clearText" onclick="document.getElementById('textbox').value = '';">Clear Textbox</span>
    				<span id="clearPrev" onclick="document.getElementById('prev').innerHTML = '';">Clear Preview</span>
    				<span id="preview" onclick="preview(document.getElementById('textbox').value);">Preview</span>
    			</div>
    			<div id="prev">&nbsp;</div>
    		</div>
    	</body>
    </html>
     
    Last edited: Dec 22, 2005

Share This Page