PDA

View Full Version : putting bold tags only to a message box



joonstar
Aug 27th, 2005, 02:46 AM
<script type='text/javascript'>

function saveCaret(elem) {
if ( elem.isTextEdit )
elem.caretPos = document.selection.createRange();
}

function bold() {
var formData = document.selection.createRange().text;
if (formData != '') {
document.selection.createRange().text = '<b>'+formData+'</b>';
}
}

</script>

<form action='action.htm'>

<input type='button' value='bold' onclick='bold()'>
<input name='title'>
<textarea name='message'></textarea>
<input type='submit'>

</form>


The above code makes it possible to add bold tags to desinated part of the both title box and message box with a button.

I like to make it possible to add bold tags to desinated part of the only message box.
In other words, I like to make it impossible to add bold tags to desinated part of the title box.

brandonH
Aug 29th, 2005, 08:05 AM
first I created a global variable called Selected.
then I added onfocus to both the title text box and the message textarea. this onfocus event sets the value of the name attribute of the current element to the variable Selected. then when the script runs it checks to see if variable Selected has a specific value, in this case 'message'. if it is 'message' then the script runs through, if not it does nothing.

using the onfocus event ensures that whatever input/textarea you make your selection in is the one that is getting tested in the script. this works because when you make a selection you must either use the mouse or tab to the input field.

i was going to use onmouse up, but the user could also use the tab key and arrow keys in combination with the shift key to highlight text within an input area. so if the user would click on the 'message' area, then tab until the title area was highlighted, the script would still work because the mouse was clicked on the message textarea but never clicked on the title input box. this would cause the variable Selected to remain set to 'message' thus allowing the script to run. Thats why I decided to use onfocus, because clicking or tabbing to an input area cause focus on that input.

what you had was a good start I didnt have to change anything just had to add to it.
i highlighted all the things i added.






<script type='text/javascript'>
var Selected=''
function saveCaret(elem) {
if ( elem.isTextEdit )
elem.caretPos = document.selection.createRange();
}

function bold() {
var formData = document.selection.createRange().text;

if (formData != '') {
if(Selected=='message'){
document.selection.createRange().text = '<b>'+formData+'</b>';
}
}
}

</script>

<form action='action.htm'>

<input type='button' value='bold' onclick="bold();">
<input name='title' onfocus='javascript:Selected=this.name;'>
<textarea name='message' onfocus='javascript:Selected=this.name;'></textarea>
<input type='submit'>

</form>



Also if you wanted more than one input/textarea to be allowed to have this done to, you can simply add the name of the other ones to the if statment that checks the value of the variable Selected.

this is current if statement:
if(Selected=='message')

to add to it just do this:
if(Selected=='message' || Selected=='message2' || Selected=='textbox2')

the || means ' or '. so it basically says
if(selected=='message' or selected=='message2' or selected=='textbox2')



hope this helps