Webmaster-Talk.com > Coding Talk > JavaScript Forum > Inputing text into text field with button

Reply
Inputing text into text field with button
Old 11-17-2008, 03:23 AM Inputing text into text field with button
lothop's Avatar
Ultra Talker

Posts: 298
Trades: 0
Talkupation: lothop is on a distinguished road
Hiyas
I'm very noob when it comes to JavaScript.

I'm trying to make smileys appear in a text field, as in these

I'm using some code which works with FireFox but doesnt work with IE.
HTML Code:
<script language="JavaScript" type="text/javascript">
function formatText(el,tagstart,tagend) {
  	if (el.setSelectionRange) {
 		el.value = el.value.substring(0,el.selectionStart) + tagstart + el.value.substring(el.selectionStart,el.selectionEnd) + tagend + el.value.substring(el.selectionEnd,el.value.length)
  	}
  	else {
  		function formatText (tag) {
        var selectedText = document.selection.createRange().text;
        
        if (selectedText != "") {
            var newText = "<" + tag + ">" + selectedText + "</" + tag + ">";
            document.selection.createRange().text = newText;
        }
    } 
  	}
  }
</script>
The first function is ment to work in firefox, but if it doesnt work in IE then it runs the 2nd function.
The links look like this
HTML Code:
<img src="smileys/icon_mad.gif" border="0" onClick="formatText(document.getElementById('body'),' :x ', '')" alt="Mad" title="Mad">
Does anyone know a better script to use? or a problem with this one?
Thankyou
__________________
Websites Created;
warscope.com
ratepayers.org.nz
lothop is offline
Reply With Quote
View Public Profile
 
 
When You Register, These Ads Go Away!
Old 11-18-2008, 06:05 AM Re: Inputing text into text field with button
lothop's Avatar
Ultra Talker

Posts: 298
Trades: 0
Talkupation: lothop is on a distinguished road
I have finally found a tutorial that solves this problem between browsers.
http://www.groomi.net/JAVASCRIPT:_Ad...REVISITED)-,46

Which uses onclick="bbcode_ins('comment', 'b') for the image clicks or button clicks.


Also in my search I found this amazingly complex script. Which I think I will use.
Although it will need to be changed to use smileys, it is still very well setup.

http://www.pixel2life.com/publish/tu...better_bbcode/

Thankyou for all those who took a look at my question.
__________________
Websites Created;
warscope.com
ratepayers.org.nz
lothop is offline
Reply With Quote
View Public Profile
 
Old 11-18-2008, 06:37 PM Re: Inputing text into text field with button
lothop's Avatar
Ultra Talker

Posts: 298
Trades: 0
Talkupation: lothop is on a distinguished road
Smileys for http://www.pixel2life.com/publish/tu...better_bbcode/

<img src="smileys/icon_smile.gif" border="0" onclick="javascript:tag('', '', '', ': )', '', 'smile');" id="smile" alt="Smile" title="Smile" />

red = characters placed in the text field
blue = the ID of the button / picture clicked
green = needs to be put in front. Tutorial only has "tag('','', .....

When I have finished I will place the complete code.
__________________
Websites Created;
warscope.com
ratepayers.org.nz
Last edited by lothop; 11-18-2008 at 06:39 PM..
lothop is offline
Reply With Quote
View Public Profile
 
Old 11-18-2008, 07:10 PM Re: Inputing text into text field with button
lothop's Avatar
Ultra Talker

Posts: 298
Trades: 0
Talkupation: lothop is on a distinguished road
HTML Code:
<head>
<script type="text/javascript" src="bbcode.js"></script>
<title></title>
<link href=".css" rel="stylesheet" type="text/css" />
</head>
<table class="tables" align="center">
				<tr align="center" valign="middle">
				  <td>
<img src="smileys/icon_smile.gif" border="0" onclick="javascript:tag('', '', '', ' :) ', '', 'smile');" id="smile" alt=":)" title="Smile" />&nbsp;
<img src="smileys/icon_biggrin.gif" border="0" onclick="javascript:tag('', '', '', ' :D ', '', 'veryhappy');" id="veryhappy" alt=":D" title="Very Happy" />&nbsp;
<img src="smileys/icon_sad.gif" border="0" onClick="javascript:tag('', '', '', ' :( ', '', 'sad');" id="sad" alt=":(" title="Sad" />&nbsp;
<img src="smileys/icon_surprised.gif" border="0" onClick="javascript:tag('', '', '', ' :o ', '', 'suprised');" id="suprised" alt=":o" title="Surprised" />&nbsp;
<img src="smileys/icon_eek.gif" border="0" onClick="javascript:tag('', '', '', ' :shock: ', '', 'shocked');" id="shocked" alt=":shocked:" title="Shocked" />&nbsp;
<img src="smileys/icon_confused.gif" border="0" onClick="javascript:tag('', '', '', ' :? ', '', 'confused');" id="confused" alt=":?" title="Confused" />&nbsp;
<img src="smileys/icon_cool.gif" border="0" onClick="javascript:tag('', '', '', ' 8) ', '', 'cool');" id="cool" alt="8)" title="Cool" />&nbsp;
<img src="smileys/icon_lol.gif" border="0" onClick="javascript:tag('', '', '', ' :lol: ', '', 'laughing');" id="laughing" alt=":lol:" title="Laughing" />&nbsp;
<img src="smileys/icon_mad.gif" border="0" onClick="javascript:tag('', '', '', ' :x ', '', 'mad');" id="mad" alt=":x" title="Mad" />&nbsp;
<img src="smileys/icon_razz.gif" border="0" onClick="javascript:tag('', '', '', ' :P ', '', 'razz');" id="razz" alt=":P" title="Razz" /></td>
		  </tr>
				<tr align="center" valign="middle">
				  <td>
<img src="smileys/icon_redface.gif" border="0" onClick="javascript:tag('', '', '', ' :red: ', '', 'embarassed');" id="embarassed" alt=":red:" title="Embarassed" />&nbsp;
<img src="smileys/icon_cry.gif" border="0" onClick="javascript:tag('', '', '', ' :cry: ', '', 'cry');" id="cry" alt=":cry:" title="Cry" />&nbsp;
<img src="smileys/icon_evil.gif" border="0" onClick="javascript:tag('', '', '', ' :evil: ', '', 'evil');" id="evil" alt=":evil:" title="Evil or Very Mad" />&nbsp;
<img src="smileys/icon_twisted.gif" border="0" onClick="javascript:tag('', '', '', ' :twisted: ', '', 'twisted');" id="twisted" alt=":twisted:" title="Twisted Evil" />&nbsp;
<img src="smileys/icon_rolleyes.gif" border="0" onClick="javascript:tag('', '', '', ' :roll: ', '', 'roll');" id="roll" alt=":roll:" title="Rolling Eyes" />&nbsp;
<img src="smileys/icon_wink.gif" border="0" onClick="javascript:tag('', '', '', ' :wink: ', '', 'wink');" id="wink" alt=":wink:" title="Wink" />&nbsp;
<img src="smileys/icon_exclaim.gif" border="0" onClick="javascript:tag('', '', '', ' :! ', '', 'exclamation');" id="exclamation" alt=":!" title="Exclamation" />&nbsp;
<img src="smileys/icon_question.gif" border="0" onClick="javascript:tag('', '', '', ' :question: ', '', 'question');" id="question" alt=":question:" title="Question" />&nbsp;
<img src="smileys/icon_idea.gif" border="0" onClick="javascript:tag('', '', '', ' :idea: ', '', 'idea');" id="idea" alt=":idea:" title="Idea" />&nbsp;
<img src="smileys/icon_arrow.gif" border="0" onClick="javascript:tag('', '', '', ' :arrow: ', '', 'arrow');" id="arrow" alt=":Arrow:" title="Arrow" /></td>
				</tr>
<form name="posting" method="post" action="">
				<tr align="center" valign="middle">
				<td>
                <div id="test-area">
<input type="button" class="buttonbold" value=" Bold " id="bold" onclick="javascript:tag('b', '[b]', 'Bold*', '[/b]', 'Bold', 'bold');" onMouseOver="helpline('bold')"/>

<input type="button" class="buttonunder" value=" Underline " id="underline" onclick="javascript:tag('u', '[u]', 'Underline*', '[/u]', 'Underline', 'underline');" onMouseOver="helpline('underline')"/>

<input type="button" class="buttonitalic" value=" Italic " id="italic" onclick="javascript:tag('i', '[i]', 'Italic*', '[/i]', 'Italic', 'italic');" onMouseOver="helpline('italic')"/>

<input type="button" class="button" value="Strikethrough" name="strikethrough" id="strikethrough" onclick="javascript:tag('s', '[s]', 'Strikethrough*', '[/s]', 'Strikethrough', 'strikethrough');" onMouseOver="helpline('strikethrough')" />

<input type="button" class="button" value=" Center " id="center" onclick="javascript:tag('center', '[center]', 'Center*', '[/center]', 'Center', 'center');" onMouseOver="helpline('center')"/>

<input type="button" class="buttonimage" value=" Image " id="img" onclick="javascript:tag('img', '[img]', 'Img*', '[/img]', 'Img', 'img');" onMouseOver="helpline('img')"/>

<input type="button" class="button" value="Url" name="url" id="url" onclick="javascript:tag('url', '[url]', 'Url*', '[/url]', 'Url', 'url');" onMouseOver="helpline('url')"/>
               <br />
               <br />
<input type="button" class="buttonpagebreak" value=" Page Break " id="brk" onclick="javascript:tag('', '', '', ' [brk/] ', 'Page Break', 'brk');" onMouseOver="helpline('url')"/>   

<br /><br />
Font size: <select name="fontsize" onChange="font('[size=' + this.form.fontsize.options[this.form.fontsize.selectedIndex].value + ']', '[/size]');" onMouseOver="helpline('fontsize')" class="form_elements_dropdown">

                                <option value="7" >Tiny</option>
                                <option value="9" >Small</option>
                                <option value="18" >Large</option>
                                <option  value="24" >Huge</option>
                        </select>


                Font color: <select name="fontcolor" onChange="font('[color=' + this.form.fontcolor.options[this.form.fontcolor.selectedIndex].value + ']', '[/color]'); this.selectedIndex=0;" onMouseOver="helpline('fontcolor')" class="form_elements_dropdown"  >
                                <option value="black" style="color:black">Black</option>
                                <option value="silver" style="color:silver">Silver</option>
                                <option value="gray" style="color:gray">Gray</option>
                                <option value="maroon" style="color:maroon">Maroon</option>
                                <option value="red" style="color:red">Red</option>
                                <option value="purple" style="color:purple">Purple</option>

                                <option value="fuchsia" style="color:fuchsia">Fuchsia</option>
                                <option value="navy" style="color:navy">Navy</option>
                                <option value="blue" style="color:blue">Blue</option>
                                <option value="aqua" style="color:aqua">Aqua</option>
                                <option value="teal" style="color:teal">Teal</option>
                                <option value="lime" style="color:lime">Lime</option>

                                <option value="green" style="color:green">Green</option>
                                <option value="olive" style="color:olive">Olive</option>
                                <option value="yellow" style="color:yellow">Yellow</option>
                                <option value="white" style="color:white">White</option>                                                </select>

</td>
				</tr>
				<tr align="center" valign="middle">
				<td>
              <div id="test">
             
            <input type="text" name="helpbox" id="helpbox" size="100" class="helpbox" readonly="readonly"/><br />
              <textarea name="post" id="post" cols="80" rows="40" class="textfieldedit"></textarea><br /><br />

     <input type="submit" name="reset" value="reset" class="reset-button" />
     <input type="submit" name="submit" value="submit" class="submit-button" /></div>
</div>
              </form>

              </td>
				</tr>
</table>
Ignore my CSS class and div tags as you will have to use your own to get the look your after.
Also, I'm using the javascript in an external file.
You will have to use your own smiley images, and also change the PHP code in the tutorial so the images match up.

I hope this helps someone in future as I had trouble finding code which would work in IE and FireFox
__________________
Websites Created;
warscope.com
ratepayers.org.nz
Last edited by lothop; 11-18-2008 at 07:15 PM..
lothop is offline
Reply With Quote
View Public Profile
 
Old 11-20-2008, 08:31 AM Re: Inputing text into text field with button
lothop's Avatar
Ultra Talker

Posts: 298
Trades: 0
Talkupation: lothop is on a distinguished road
I found some errors in the PHP code with the Tutorial.
This code is corrected.
PHP Code:
function bb_encode($Text) {
        
        // Replace any html brackets with HTML Entities to prevent executing HTML or script
        // Don't use strip_tags here because it breaks [url] search by replacing & with amp
        $Text = str_replace("<", "&lt;", $Text);
        $Text = str_replace(">", "&gt;", $Text);
        
        // Convert new line chars to html <br /> tags
        $Text = nl2br($Text);
        
        // Set up the parameters for a URL search string
        $URLSearchString = " a-zA-Z0-9\:\/\-\?\&\.\=\_\~\#\'";
        // Set up the parameters for a MAIL search string
        $MAILSearchString = $URLSearchString . " a-zA-Z0-9\.@";
        
        // Perform URL Search
        $Text = preg_replace("/\[url\]([$URLSearchString]*)\[\/url\]/", '<a href="$1" target="_blank">$1</a>', $Text);
        $Text = preg_replace("(\[url\=([$URLSearchString]*)\](.+?)\[/url\])", '<a href="$1" target="_blank">$2</a>', $Text);
        
        // Perform MAIL Search
        $Text = preg_replace("(\[mail\]([$MAILSearchString]*)\[/mail\])", '<a href="mailto:$1">$1</a>', $Text);
        $Text = preg_replace("/\[mail\=([$MAILSearchString]*)\](.+?)\[\/mail\]/", '<a href="mailto:$1">$2</a>', $Text);
        
        // Check for bold text
        $Text = preg_replace("(\[b\](.+?)\[\/b])is",'<span class="bold">$1</span>',$Text);
        
        // Check for Italics text
        $Text = preg_replace("(\[i\](.+?)\[\/i\])is",'<span class="italics">$1</span>',$Text);
        
        // Check for Underline text
        $Text = preg_replace("(\[u\](.+?)\[\/u\])is",'<span class="underline">$1</span>',$Text);
        
        // Check for strike-through text
        $Text = preg_replace("(\[s\](.+?)\[\/s\])is",'<span class="strikethrough">$1</span>',$Text);
        
        // Check for over-line text
        $Text = preg_replace("(\[o\](.+?)\[\/o\])is",'<span class="overline">$1</span>',$Text);
        
        // Check for colored text
        $Text = preg_replace("(\[color=(.+?)\](.+?)\[\/color\])is","<span style=\"color: $1\">$2</span>",$Text);
        
        // Check for sized text
        $Text = preg_replace("(\[size=(.+?)\](.+?)\[\/size\])is","<span style=\"font-size: $1px\">$2</span>",$Text);
        
        // Check for list text
        $Text = preg_replace("/\[list\](.+?)\[\/list\]/is", '<ul class="listbullet">$1</ul>' ,$Text);
        $Text = preg_replace("/\[list=1\](.+?)\[\/list\]/is", '<ul class="listdecimal">$1</ul>' ,$Text);
        $Text = preg_replace("/\[list=i\](.+?)\[\/list\]/s", '<ul class="listlowerroman">$1</ul>' ,$Text);
        $Text = preg_replace("/\[list=I\](.+?)\[\/list\]/s", '<ul class="listupperroman">$1</ul>' ,$Text);
        $Text = preg_replace("/\[list=a\](.+?)\[\/list\]/s", '<ul class="listloweralpha">$1</ul>' ,$Text);
        $Text = preg_replace("/\[list=A\](.+?)\[\/list\]/s", '<ul class="listupperalpha">$1</ul>' ,$Text);
        $Text = str_replace("[*]", "<li>", $Text);
        
        // Check for font change text
        $Text = preg_replace("(\[font=(.+?)\](.+?)\[\/font\])","<span style=\"font-family: $1;\">$2</span>",$Text);
        
        // Declare the format for [code] layout
        $CodeLayout = '<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                                <td class="quotecodeheader"> Code:</td>
                            </tr>
                            <tr>
                                <td class="codebody">$1</td>
                            </tr>
                       </table>';
        // Check for [code] text
        $Text = preg_replace("/\[code\](.+?)\[\/code\]/is","$CodeLayout", $Text);
        
        // Declare the format for [quote] layout
        $QuoteLayout = '<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                                <td class="quotecodeheader"> Quote:</td>
                            </tr>
                            <tr>
                                <td class="quotebody">$1</td>
                            </tr>
                       </table>';
                 
        // Check for [code] text
        $Text = preg_replace("/\[quote\](.+?)\[\/quote\]/is","$QuoteLayout", $Text);
        
        // Images
        // [img]pathtoimage[/img]
        $Text = preg_replace("/\[img\](.+?)\[\/img\]/", '<img src="$1">', $Text);
        
        // [img=widthxheight]image source[/img]
        $Text = preg_replace("/\[img\=([0-9]*)x([0-9]*)\](.+?)\[\/img\]/", '<img src="$3" height="$2" width="$1">', $Text);
        
        return $Text;
    } 
You will notice
// Check for Underline text
$Text = preg_replace("(\[u\](.+?)\[\/u\])is",'<span class="underline">$1</span>',$Text);

Uses a CSS class, if you dont wish to use CSS replace this with
// Check for Underline text
$Text = preg_replace("(\[u\](.+?)\[\/u\])is",'<u>$1</u>',$Text);
__________________
Websites Created;
warscope.com
ratepayers.org.nz
lothop is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Inputing text into text field with button
 
Previous Thread | Next Thread Webmaster-Talk.com > Coding Talk > JavaScript Forum > Inputing text into text field with button

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Webmaster Resources Marketplace:
Software Development Company |  Webhosting.UK.com |  Text Link Brokers |  Dedicated Server Hosting |  Managed Hosting |  Logo Design Services |  SEO |  Hosted Exchange Hosting


   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.12117 seconds with 13 queries