Last updated on February 9th, 2022 at 01:30 pm
This tutorial will show you how to insert text and smilies / emoji in to text field using javascript. This script also have options to add
- URL
- Bold
- Italics
- Code
- Image
- Underline
Once you have those in the textarea all you have to do is parse these shortcodes on your server to provide the result when user submit the form.
Here is the complete code
<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" value="Smilie" class="smiley1" onclick="storeCaret(':)','smiley')"/></div>
<textarea name="newst" id="newst" class="text" rows="10" cols="45"></textarea>
</div>
</form><script language="Javascript">
document.getElementById('newst').value = ""; // needed for firefox
</script>
admin