SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    inserting function for <br>,<hr>,<b></b>, and <i></i> in a textarea.

    Code:
    <HTML>
    <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    function saveCaret(elem)
    {
    if ( elem.isTextEdit ) 
    elem.caretPos = document.selection.createRange();
    }
    function insertText(elem,wordInsert)
    {
    if ( elem.isTextEdit && elem.caretPos )
    {
    var bookmark = wordInsert;
    var caretPos = elem.caretPos;
    caretPos.text = bookmark;
    }
    }
    </SCRIPT>
    </HEAD>
    
    <BODY>
    
    <INPUT TYPE="button" VALUE="<br>" ONCLICK="insertText(message,'<br>')">
    <INPUT TYPE="button" VALUE="<hr>" ONCLICK="insertText(message,'<hr>')">
    
    <textarea  NAME="message" ONSELECT="saveCaret(this)" 
    ONCLICK="saveCaret(this)" ONKEYUP="saveCaret(this)"
    cols="76" rows="20"></textarea>
    
    </BODY>
    </HTML>
    The above code is for inserting <br> and <hr> into message textarea.
    and the below code is for inserting <b></br> and <i></i> into the blocked area.

    Code:
    <script language="JavaScript">		
    function Bold(){
    var formData = document.selection.createRange().text;
    if (formData == ''){
    window.formName.say.value = window.formName.say.value+'<b></b>';
    		}
    else{
    document.selection.createRange().text = '<b>'+formData+'</b>';
    }
    }
    function Italic(){
    var formData = document.selection.createRange().text;
    if (formData == ''){
    window.formName.say.value = window.formName.say.value+'<i></i>';
    }
    else{
    document.selection.createRange().text = '<i>'+formData+'</i>';
    }
    }
    </script>
    
    <input type="button" value=" <b> " onclick="Bold()">
    <input type="button" value=" <i> " onclick="Italic()"> 
    
    <textarea name="textarea" cols="76" rows="20"></textarea>
    I like to integrate the above two codes into one.

  2. #2
    SitePoint Member explorer's Avatar
    Join Date
    Dec 2003
    Location
    Amsterdam
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not a problem. I took the liberty of cleaning up the code and layout a bit...

    Code:
    <html>
    <head>
     <style type="text/css">
      body {
       font-family:verdana,arial;
       font-size:9pt;
      }
      input.but {
       width:50px;
       background-color:#ddd;
       border:1px solid #000;
      }
      textarea.area {
       width:100%;
       height:200px;
       border:1px solid #000;
       overflow:auto;
      }
     </style>
     <script type="text/javascript" language="javascript">
      function saveCaret(elem) {
       if ( elem.isTextEdit ) 
    	elem.caretPos = document.selection.createRange();
      }
      
      function insertText(elem, wordInsert) {
       if ( elem.isTextEdit && elem.caretPos ) {
    	var bookmark = wordInsert;
    	var caretPos = elem.caretPos;
    	caretPos.text = bookmark;
       }
      }
      
      function Bold() {
       var formData = document.selection.createRange().text;
       if (formData != '') {
    	document.selection.createRange().text = '<b>'+formData+'</b>';
       }
      }
      
      function Italic() {
       var formData = document.selection.createRange().text;
       if (formData != '') {
    	document.selection.createRange().text = '<i>'+formData+'</i>';
       }
      }
     </script>
    </head>
    <body>
     <input class="but" type="button" value="break" onclick="insertText(message,'<br>')">
     <input class="but" type="button" value="line" onclick="insertText(message,'<hr>')">
     <input class="but" type="button" value="bold" onclick="Bold()">
     <input class="but" type="button" value="italic" onclick="Italic()"> 
     <br>
     <textarea class="area" name="message" onselect="saveCaret(this)" 
      onclick="saveCaret(this)" onkeyup="saveCaret(this)"></textarea>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •