inserting characters in a webform

[rspst13]

Hi everybody,

I'm new to this forum, but I like waht I see from my brief breeze through. Another note, I'm realtivley new to writing my own scripts, but I consider myself a quick study in these things.

My project is this:

As a foreign language teacher it is important to use special foreign characters in the online assigements and such. What I've been toying with is the idea of a javascript based menu within a form which would insert [ ó á é í ö ü ä ß ] when you clicked on a button.

The question I suppose I have is:
is it feasible to have a jave-button insert into a text-form where the cursor was just active?

Are there any good examples of scripts out there that have a similar funtion?

Thanks for your help.
Richard :D

[freefall]

Hello,
Well what you might want to play around with is taking the value of the textbox when the button is clicked, adding the specified character, then setting the value of the textarea equal to this new string. You can then use a document.form[0].yourTextArea.focus() to move the cursor back to the textbox.
That should work, I'll be interested to see what you come up with, test out your skills =)
God bless, and good luck with this,
Ian Paterson

www.degreethree.com/newsite

[rspst13]

Thanks for your tip! I'm not quite to the point where I am generalizing my script so that it 'remembers' were the cursor came from.



This has been a great exercise in learning the scripting language, but I'm stuck one minor point. I can get the script working, that is it tacks on something to the end of the value, but it i sn't the special character I want. I have a feeling it is a variable problem. Any ideas on how to get the special character, not jus tthe code dumped into the string. My script looks something like this:

<br>

//in head of document
<script type="text/javascript"><!--

//declares the specual characters to be inserted on button click

var special;
var a_um = 'ä' ;
var o_um = 'ö' ;
var u_um = 'ü' ;
var esszet = 'ß' ;

function add_special(special)
{
var field = window.document.test_form1.box_1.value;
var new_field = field.concat(special);
window.document.test_form1.box_1.value = new_field;
}

//-->
</br>

I call the function from an onClick inside my form and

For instance onClick = add_special(a_um);

[rspst13]

Well, i didn't include the acual characters in my post, but they seem to have been changed auto matically.

where you see ä etc. I acutally have the special codes

& # 2 2 8 ;

[freefall]

Hello again!
The key to getting the cursor in the right spot is setting the focus to the textarea before you add the character. See if you can develop your code like this, I hadn't tested it before, but I have now!

Here's one suggestion, instead of storing the special characters in variables, use the same code you have, but pass the raw characters right from the onClick event for each button. For example, for the ä button, just pass your function the 'ä' string.

It's also possible to condense your function to 2 lines, one for focusing on the textarea element, one for your concat.

EDIT:
oops! I just ran it again and it's not liking the concat method. It might be that I messed something up in the code...

But instead of ~.value.concat(special) you can also use ~.value += special; This is just like saying ~.value = ~.value + special; the += is a special operand for adding the values on both side of the += and assigning it to the value on the left.

--

I'll be interested to see what you come up with, God bless!
- Ian

[rspst13]

Yay, I've got this pretty much working in the most basic sense, great idea on passing the function data straight through. . . I didn't realize those characters would work just fine on their own. a little cut & paster here and there and step one is working as I wanted it to.

The less mess the better i'm finding.

No time to work on this tonite, but I'll dins some time to work on the focus scripting tonite.

Freefall, you should be a teacher, very 'vygotskian' in the way you're helping me out. . . I really appreciate it. I'm learning a ton too.

[freefall]

Thanks! However I must admit, I'm more concerned about being taught myself, maybe some day after I get out of high school and find out what I want to do with my life in college!

If you need anything else, I'll be here!
- Ian

[rspst13]

Ian,

Thanks for all your help! I'm pretty much where I wanted to be right now. Who knew this would end up as such a simple little script. it seemed much more involved than this.

The next step, might get more involved. I'm going to wait and work on it later.

Many thanks!

Richard

[rspst13]

Okie dokie.
This was easy. Maybe.

Here is a working example of pretty much what I wanted to do.

http://www.mrplatts.com/experiment/form_two1.html

I had the script 'remember' where it came from by adding an onBlur=FieldName=this.name; to each text field.

Here's my foreseen bugs. This is all well and good for inserting a character when the user knows they need it there, but if they want to make a correction they have to delete eveything up till the point where they want to insert and then insert it, or copy/paste.

Also, I have to put in that onBlur to each <input> so it could be a pain, not to me per se, but if I wanted to give this to other teachers to use it is getting more and more complicated as I go along.

Finally I get an error if I haven't focused in a box yet. i could fix that by sending the focus to the first editable field when the page loads. I've seen a script that does this out there somewhere.

Whaddaya think?

[freefall]

For your problem with changing a character, I would research the textRange object. I have used it before, and I believe that you can easily get the selected text, then modify it. I will try to figure something out tonight so that I can give you a bit clearer of a path to follow.

**homeworkering away
- Ian

[freefall]

Well, I've got it so that it will replace text in the body of the page, but that's definitely not what you want!

Okay, I've got it! I haven't done any preventative coding, but I'll tell you what I've got going on.

I've changed a couple things around to help in the implementation of this idea, here are a few snippets of your modified code:

--

function add_special(element)
{
var range = document.selection
range = range.createRange();
range.text = element.value;

// your code
}

<input type="button" name="ss" onclick="add_special(this)" value="ß">

--

I just commented out your code for the purposes of this post, but for one thing, you'll need to decide when there is a selection and when there isn't. When there is you'll execute my code, when there isn't, you run yours to concatenate the character. Simple enough? Not quite!

Also you'll need to make sure the selection is in a proper input object, this is INCREDIBLY important! (w/o checking, this will replace anything that's selected with the character!)

What I'm doing with the add_special function is having it receive the button element that calls it as a parameter, and since the chacter to be displayed by the button is now located in the button's value tag, you can nab the character very simply. So what this is doing is taking whatever is selected in the document, and replacing it with the value of the button.

So if you can figure out a good way to make sure the selection is in either a textarea or a text field, this code should do the trick. It was really aggravating trying to figure it out!

Without the checking, this code is vile! You could potentially... checking... yes, you could potentially replace the entire page with a single character.


Have fun playing with one of the most caustic elements of javascript =)
- Ian

More reference: http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_selection.asp

[rspst13]

wow, just as I was getting all chuffed with myself for having figured out how to do it one way you throw in a monkey wrench (or a whole toolbox it seems)

Oh yeh, the more responsible teacher adult part of me hopes that you are doing your homework and not just playing around with JavaScript to help me out.

The other, less sensible, part thanks you very much for lending a hand.

Edit: and thanks for the link to the MSDN LIbrary, I've been looking for something exactly like that.


R

[freefall]

It's fine, I do most of my homework when I get home, I was just finishing up some little stragger last night!

And you're welcome, glad I could help.
- Ian