PDA

Click to See Complete Forum and Search --> : Replacing selected text

JimJamJammin
02-24-2003, 01:46 PM
Is there any way of replacing selected text within a form input field. It would be particularly useful if for example the user wanted to have bold text. They would be able to select some text, then click on a 'Bold' button to automatically insert the appropriate code around the text.
Nevermore
02-24-2003, 01:48 PM
Yes, I'm pretty sure Dave Clark posted a perfect solution, which did just that, a short time ago. Dave, post it again, please?
JimJamJammin
02-25-2003, 02:44 AM
Thankyou! I hope you don't mind me adapting the code to get rid of the prompt.
mago
09-12-2005, 02:38 PM
Dave Clark's post has been deleted. Does anyone have the code which they are referring to?
Nevermore
09-12-2005, 02:46 PM
Dave Clark's post has been deleted. Does anyone have the code which they are referring to?

No, sorry, but if you can wait 24 hours (ish) I can knock something up for you. (It's late here.)
mago
09-12-2005, 02:51 PM
No problem, would appreciate any help!

It's even later in Brussels :)
MjhLkwd
09-12-2005, 03:39 PM
Jim:

IE ONLY:

<HTML>
<Head>
<Script type="text/javascript">

function wrapSelection(isTag){

document.getElementById('editDiv').focus();
workText = document.selection.createRange();
if (document.selection.type == 'Text')
{workText.pasteHTML("<"+isTag+">"+workText.text+"</"+isTag+">")}
}

function unDoAll(){

workText = document.getElementById('editDiv').innerHTML; workText = workText.replace(/<[bui]+>/gi,'').replace(/<\/[bui]>/gi,'');
document.getElementById('editDiv').innerHTML = workText;
}

function unDoSelection(){

document.getElementById('editDiv').focus();
workText = document.selection.createRange();
tmp = workText.htmlText;
tmp = tmp.replace(/<[bui]+>/gi,'').replace(/<\/[bui]>/gi,'');
workText.text = ""+tmp+"";
document.selection.empty();
}

function clearIt(){

document.getElementById('editDiv').innerHTML = "";
document.selection.clear();
}

</Script>
</Head>
<Body>
<p>To Un-Do Selected, you must extend the highlight so that it touches<br>the END of the previous word and touches the START of the next word.</p>
<Div id='editDiv' contenteditable style='width:340px;height:150px;border:solid black 1px;overflow:auto'>Hello <b>there</b> you</Div>
<br>
<input type=button value='Italic' id='iBtn' onclick="wrapSelection('i')">
<input type=button value='Bold' id='bBtn' onclick="wrapSelection('b')">
<input type=button value='Underline' id='uBtn' onclick="wrapSelection('u')">
<input type=button value='Un-Do Selected' id='undoSelBtn' onclick="unDoSelection()"><br><br>
<input type=button value="Delete All" id='delBtn' onclick="clearIt()">
<input type=button value="Un-Do All" id='undoAllBtn' onclick="unDoAll()">
</Body>
</HTML>
mago
09-13-2005, 03:04 AM
Hi Mike and thanks for the script.

I really need a cross-browser solution though.
mago
09-14-2005, 07:40 AM
Nevermore, did you find any solution to this? Or maybe someone else has some suggestions?