Help with textarea...

eXtaZa · May 13, 2006

So...
If have a textarea named "Message" and a image named "a",
and I want that when i'm clicking the "a" image it write to me the string ":lol:" in the textarea, i'm doing like this (the function):
[code]
function AddSmile(smile_name){
document.myForm.Message.value = document.myForm.Message.value + smile_name;
}
[/code]

and the code in the image:

[code]
<a href="#" onClick="AddSmile(':lol:')"><img src="a.gif"></a>
[/code]

Now... when I will click "a" image, it will write to me the string ":lol:" in the textarea, but it will write this string in the end of the text that I wrote, And I want that it will write to me this string where I'm focusing with the cursor.
I mean that if I wrote in the textarea like this:
123456789
And I'm focusing with the cursor between 4 and 5 (1234 56789) then I want that when im clicking the image it will write to me ":lol:" between 4 and 5 and not in the end, after 9.
How can I do that?

Thanks.

GBS · May 17, 2006

Here we go,,,

Taken from 2 existant scripts & a little bit changed,, (1st one was for the bbcode tags, & the other for the smileys)
[code]
<html>
<head>
<title>Inserting text and smileys,,</title>

<style>
body {
background-color:white;
}

.textform {
position:absolute;
left:120px;
top:50px;
}

.buttons {
margin-left:5px;
padding-bottom: 0.5em;
}

.text {
background-color:#FAF9F0;
}

.smiley1 {
background:url(a.gif) no-repeat;
width:24px;
cursor:pointer;
position:absolute;
padding: .6em;
padding-top: 0;
padding-bottom: 0;
top:50px;
left:-50px;
}
</style>

</head>
<body>

<script language="Javascript">
var isMozilla = (navigator.userAgent.toLowerCase().indexOf('gecko')!=-1) ? true : false;
var regexp = new RegExp("[\n]","gi");

function storeCaret(selec,type)
{
    if (isMozilla)
        { // Firefox
        oField = document.forms['news'].elements['newst'];
        objectValue = oField.value;

        objectValueStart = objectValue.substring( 0 , oField.selectionStart );
        objectValueEnd = objectValue.substring( oField.selectionEnd , oField.textLength );
        objectSelected = objectValue.substring( oField.selectionStart ,oField.selectionEnd );

        if (type) // smiley
            {
            oField.value = objectValueStart + " " + selec + objectSelected + objectValueEnd;
            }
        else
            {
            oField.value = objectValueStart + "[" + selec + "]" + objectSelected + "[/" + selec + "]" + objectValueEnd;
            }
        oField.focus();
        if (type) // smiley
            {
            oField.setSelectionRange(objectValueStart.length + selec.length + 2,objectValueStart.length + selec.length + 1);
            }
        else
            {
            oField.setSelectionRange(objectValueStart.length + selec.length + 2,objectValueStart.length + selec.length + 2);
            }
        }
    else
        { // IE
        oField = document.forms['news'].elements['newst'];
        var str = document.selection.createRange().text;
        if (str.length>0)
            {// if we have selected some text,,
            var sel = document.selection.createRange();
            if (type) // smiley
                {
                sel.text = " " + selec;
                }
            else
                {
                sel.text = "[" + selec + "]" + str + "[/" + selec + "]";
                }
            sel.collapse();
            sel.select();
            }
        else
            {
            oField.focus(oField.caretPos);
            oField.focus(oField.value.length);
            oField.caretPos = document.selection.createRange().duplicate();

            var bidon = "%~%"; // needed to catch the cursor position with IE
            var orig = oField.value;
            oField.caretPos.text = bidon;
            var i = oField.value.search(bidon);

            if (type) // smiley
                {
                oField.value = orig.substr(0,i) + " " + selec +  orig.substr(i, oField.value.length);
                }
            else
                {
                oField.value = orig.substr(0,i) + "[" + selec + "][/" + selec + "]" + orig.substr(i, oField.value.length);
                }

            var r = 0;
            for(n = 0; n < i; n++)
                {
                if(regexp.test(oField.value.substr(n,2)) == true)
                    {r++;}
                };
            if (type) // smiley
                {
                pos = i + 1 + selec.length - r;
                }
            else
                {
                pos = i + 2 + selec.length - r;
                }

            // re-format the textarea & move the cursor to the correct position
            var r = oField.createTextRange();
            r.moveStart('character', pos);
            r.collapse();
            r.select();
            }
        }
}

</script>

<form name="news">
<div class="textform">
    <div class="buttons">
    <input type="button" value="b" style="width:50px;font-weight:bold" onclick="storeCaret('b')">
    <input type="button" value="i" style="width:50px;font-style:italic" onclick="storeCaret('i')">
    <input type="button" value="u" style="width:50px;text-decoration:underline" onclick="storeCaret('u')">
    <input type="button" value="quote" style="width:50px" onclick="storeCaret('quote')">
    <input type="button" value="code" style="width:50px" onclick="storeCaret('code')">
    <input type="button" value="url" style="width:50px" onclick="storeCaret('url')">
    <input type="button" value="img" style="width:50px" onclick="storeCaret('img')">
    <input type="button" class="smiley1" onclick="storeCaret(':)','smiley')">
    </div>
<textarea name="newst" id="newst" class="text" rows="10" cols="45"></textarea>
</div>
</form>

<script>
document.getElementById('newst').value = ""; // needed for firefox
</script>

</body>
</html>
[/code]
Hoping it helps,... & have a fun with it ! :)

l8tr,,

Sign In

Help with textarea...

Recommended Posts

eXtaZa

Link to comment

Share on other sites

GBS

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information