Compatible Browsers:
Example: View Code Demo
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Auto-Magically Insert HTML Tags</title>
<style>
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;}
#content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px; text-shadow:0px 1px 1px rgba(0,0,0,0.2);}
.intLink {cursor:pointer;text-decoration:underline;color:#0000ff;}
</style>
<script>
<!--
// Begin Auto-Magically Insert HTML Tags
// == This Script Free To Use Providing This Notice Remains == //
// == This Script Has Been Found In The http://www.SnapBuilder.com Free Public Codes Library == //
// == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == //
function insertMetachars(sStartTag, sEndTag) {
var bDouble = arguments.length > 1, oMsgInput = document.myForm.myTxtArea, nSelStart = oMsgInput.selectionStart, nSelEnd = oMsgInput.selectionEnd, sOldText = oMsgInput.value;
oMsgInput.value = sOldText.substring(0, nSelStart) + (bDouble ? sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag : sStartTag) + sOldText.substring(nSelEnd);
oMsgInput.setSelectionRange(bDouble || nSelStart === nSelEnd ? nSelStart + sStartTag.length : nSelStart, (bDouble ? nSelEnd : nSelStart) + sStartTag.length);
oMsgInput.focus();
}
// -->
</script>
</head>
<body>
<div id="content">
<h3>Auto-Magically Insert HTML Tags</h3>
<p>The following example shows how to insert some HTML tags or smiles or any custom text in a textarea. Go ahead, try it out!</p>
<form name="myForm">
<p>[ <span class="intLink" onclick="insertMetachars('<strong>','<\/strong>');"><strong>Bold</strong></span> | <span class="intLink" onclick="insertMetachars('<em>','<\/em>');"><em>Italic</em></span> | <span class="intLink" onclick="var newURL=prompt('Enter the full URL for the link');if(newURL){insertMetachars('<a href=\u0022'+newURL+'\u0022>','<\/a>');}else{document.myForm.myTxtArea.focus();}">URL</span> | <span class="intLink" onclick="insertMetachars('\n<code>\n','\n<\/code>\n');">code</span> | <span class="intLink" onclick="insertMetachars(' :-)');">smile</span> | etc. etc. ]</p>
<p><textarea rows="10" cols="50" name="myTxtArea">This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</textarea></p>
</form>
<br /><br /><br /><br /><br />
<p>
[ This code example from <a href="http://snapbuilder.com/code_snippets/snippet.php?sid=189">Auto-Magically Insert HTML Tags Code Snippet</a> page. ]
</p>
</div>
</body>
</html>