/    Sign up×
Community /Pin to ProfileBookmark

Edit textarea

Copy linkTweet thisAlerts:
May 13.2006

I am writing a javascript + HTML program to edit a textarea like the one above when posting a thread. Simply I am adding a Bold, Underline and Italics button like any other editor to edit a text area, but I am building it myself. I can extract the selected text and all the text. I can change all the text in theElement to B,U and/or I. But I want to be able to select a portion of the text and ammend it accordingly. I need to know how to extract a substring from theElement object, ammend it accordingly and then display it again in the textarea. Below is a function that is called when the Bold button is called. It is just a snippet of code I know that works. I am hoping you can fill in the blanks

[CODE]function eButton()
{
document.pstmess.TA1.focus();
theElement = document.getElementById(“TA1”);
theElement.style.fontWeight= ‘bold’;

/**
var str = document.selection.createRange().text;
**/
}[/CODE]

I

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceMay 13.2006 — This is for IE-only. I've heard Mozilla, at least, has much the equivalent capability, but I can't find as useful or as concise of documentation (e.g., [URL=http://msdn.microsoft.com/workshop/author/dhtml/reference/objects.asp]DHTML Objects[/URL]) for any browser except IE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Edit Textarea</title>
<style type="text/css">
<!--
.smBtn {
position: relative;
width: 25px;
height: 25px;
font-family: 'Times New Roman', serif;
text-align: Center;
}
-->
</style>
<script type="text/javascript">
<!--//
function findFromCaret(objTxt, needle) {
if (objTxt.createTextRange) {
if (!objTxt.selection) {
objTxt.selection = document.selection.createRange().duplicate();
}
objTxt.selection.collapse(false);
var len = objTxt.value.length;
if (objTxt.selection.findText(needle, len)) {
objTxt.selection.select();
} else {
alert("Not found.");
}
objTxt.focus();
}
return true;
}
function formatString(arg, inp, beg, end, msg) {
var str = prompt("Enter text to be *"+msg+"*:", inp);
if (arg.createTextRange && arg.selection) {
if (str != null) {
str = (arg.selection.text.charAt(arg.selection.text.length - 1) == ' ')
? str.replace(/s+$/,"") : str;
str = beg + str + end;
} else {
arg.selection = null;
}
} else {
if (str != null) {
str = beg + str + end;
}
}
return str;
}
function insertAtCaret(objTxt, beg, end, msg) {
if (objTxt.createTextRange){
var str = (objTxt.selection) ? objTxt.selection.text : "";
str = formatString(objTxt, str, beg, end, msg);
if (str == null) return true;
if (objTxt.selection) {
var objTxtRange = objTxt.selection;
objTxtRange.text = (objTxtRange.text.charAt(objTxtRange.text.length - 1) == ' ')
? str + ' ' : str;
objTxt.selection = null;
} else {
objTxt.value += str;
}
objTxt.focus();
}
return true;
}
function storeCaret(objTxt){
if (objTxt.createTextRange){
objTxt.selection = document.selection.createRange().duplicate();
}
return true;
}
//-->
</script>
</head>

<body>
<form name="edit" action="" onsubmit="return false;">
<div style="float:left; width:200px; height:25px">Text Edit:</div>
<div>
<input type="text" name="findText" size="20" alt="Find Text"> 
<button type="button" class="smBtn" style="width:50px;"
onclick="return findFromCaret(content, findText.value);">Find</button>
<button type="button" class="smBtn" style="font-weight:bold;"
onclick="return insertAtCaret(content, '[b]', '[/b]', 'bold');">
B</button> 
<button type="button" class="smBtn" style="font-style:italic;"
onclick="return insertAtCaret(content, '[i]', '[/i]', 'italic');">
I</button> 
<button type="button" class="smBtn" style="text-decoration:underline;"
onClick="return insertAtCaret(content, '[u]', '[/u]', 'underline');">
U</button> 
</div>
<div>
<textarea name="content" cols="60" rows="8"
onSelect="return storeCaret(this);"
onClick="return storeCaret(this);"
onKeyup="return storeCaret(this);">This is a test.</textarea>
</div>
</form>
</body>
</html>
Copy linkTweet thisAlerts:
@mrhooMay 14.2006 — A textarea can only contain text nodes,

which inherit their style properties from the textarea.

You can't insert, say, a span in a textarea, just the text.

To display differences in your formatted selections you need to be working with

actual elements which can have their own style properties,

for which you can use php's methods (for IE)

and the DOM Range and TreeWalker methods in firefox, seamonkey and others.
Copy linkTweet thisAlerts:
@phpnoviceMay 14.2006 — Sorry, one of us must have misunderstood the original request. The code I posted doesn't create HTML elements within a TEXTAREA. What I posted creates UBB code around selected text -- much the same as the TEXTAREAs used by this board. If the OP wants an editable area that will create WYSIWYG-type displays, then they will need to use a ContentEditable DIV, e.g., in IE and other methods in other browsers.
Copy linkTweet thisAlerts:
@derk_the_zeemanauthorMay 14.2006 — Thank-you for the help. The only problem is when I set :

var str = '[b]' + 'string to bold' + '[/b]';

document.pstmess.TA1.value = str;

the tags do not work. I get a couple of squares wrapped in brackets. I need the proper tags for displaying the tagged text in bold. I guess there might be a piece of code I am missing.
Copy linkTweet thisAlerts:
@phpnoviceMay 15.2006 — ... the tags do not work. I get a couple of squares wrapped in brackets.[/QUOTE]
That is what you're supposed to get and that represents all you [I][U]can[/U][/I] get in a TEXTAREA. That is what the editing boxes for this site give you, too -- the ability to display text only. As mentioned, a TEXTAREA cannot render HTML -- it can only render text. Otherwise, you can change those strings to whatever character sequences you wish to use to wrap the selected text.
Copy linkTweet thisAlerts:
@derk_the_zeemanauthorMay 15.2006 — theElement = document.getElementById("TA1");

theElement.style.fontStyle = 'italic';

theElement.style.fontWeight= 'bold';

I can set the entire text to italic bold or underline using the following code in a textarea. So I guess you can set a selected amount also. Thats what I need to be able to do.
Copy linkTweet thisAlerts:
@phpnoviceMay 15.2006 — I can set the entire text to italic bold or underline using the following code in a textarea. So I guess you can set a selected amount also. Thats what I need to be able to do.[/QUOTE]
Well, your guess is dead wrong. The TEXTAREA element will display [B][I][U]all[/U][/I][/B] of the content text with those settings but you cannot do better than that with the text inside a TEXTAREA.
×

Success!

Help @derk_the_zeeman spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...