How to delete a character at the caret? Extend selection?

N

Noah

I have a text field in a form. I want the user to be able to click
a DELETE button and have the character at the cursor position deleted.
This would be just as if the user had pressed the Back Space key on the
keyboard... But this is for a kiosk application with no keyboard :-(
so I need to program a delete button.

I have code that lets me insert text at the cursor position.
And I can move the ABSOLUTE cursor position from the start and end.
For example, if my text field looks like this (With | representing the caret):
ABCDEF|GHIJKL
....and I call moveStart('character', 1) I get this:
A|BCDEFGHIJKL

I was hoping that I could move the selection RELATIVE to the current position:
var r = my_field.createTextRange();
r.moveStart('character', -1); // This doesn't work...
r.select();
r.text = "";
Or if I could at least get the cursor or selection coordinates:
var r = my_field.createTextRange();
var LEFT = r.start; // This doesn't work
r.moveStart('character', LEFT-1);
r.select();
r.text = "";
Mozilla lets you get the selectionStart, but I can't figure out how to
do this for IE. Is there anything like selectionStart in IE?

Yours,
Noah
 
M

Marek Mand

Noah said:
I have a text field in a form. I want the user to be able to click
a DELETE button and have the character at the cursor position deleted.
This would be just as if the user had pressed the Back Space key on the
keyboard... But this is for a kiosk application with no keyboard :-(
so I need to program a delete button.
I have code that lets me insert text at the cursor position. []
I was hoping that I could move the selection RELATIVE to the current position:
var r = my_field.createTextRange();

have you tried

var r=document.selection.createRange()

instead of that?
r.moveStart('character', -1); // This doesn't work...
r.select();
r.text = "";

There are many ways achieving what you want.
Probably the dumbest using the inverse logic of the direction of
deletion would be:

get selection,
move one character backwards r.move('character', -1)
and then execCommand('Delete')


HTH
 
N

Noah

Marek Mand said:
have you tried

var r=document.selection.createRange()

Ah! That was the trick. I get createRange and createTextRange mixed up.
This should also work for moving the cursor left and right; although,
I'm not sure how I will get cursor up and cursor down to work.

The full code for Back Space follows.
There is extra logic because the BackSpace key behaves differently if
there is already a selected range. The only drawback I found
is that the caret is hidden after this. The field still has focus
and any new typing will reveal the caret, but the caret is hidden until then.
// This emulates the Back Space (BkSP) key in JavaScript for IE.
var r = document.selection.createRange();
if (r.text.length == 0) { // Select one character to the left of caret.
r.move('character', -1);
r.moveEnd ('character', 1);
}
r.execCommand ('Delete');
r.execCommand ('Unselect');
Note: if you want Delete (del) key behavior instead of BkSpc then don't
execute the r.move('character',-1) line of code.

Now I just have to figure out how to do this in Mozilla :p
Will there ever be a unified DOM?

Yours,
Noah
 
M

Marek Mand

Noah said:
Ah! That was the trick. I get createRange and createTextRange mixed up.
This should also work for moving the cursor left and right; although,
I'm not sure how I will get cursor up and cursor down to work.


up? down? mm, aha you have a textarea...
this will be quite tricky, as IHMO move('caracter') is broken there.
But that is only my personal opinion.

The full code for Back Space follows.

As you were so nice and posted back so the others can learn from it,
which is quite rare nowadays
There is extra logic because the BackSpace key behaves differently if
there is already a selected range. The only drawback I found
is that the caret is hidden after this. The field still has focus
and any new typing will reveal the caret, but the caret is hidden until then.
Code:
then I take and answer also this.
The aswer for your problem probably is:

r.select();

after finishing the programmatic editing operations.
If it doesnt work, then do tell me.

[QUOTE]
// This emulates the Back Space (BkSP) key in JavaScript for IE.
var r = document.selection.createRange();
if (r.text.length == 0) { // Select one character to the left of caret.
r.move('character', -1);
r.moveEnd ('character', 1);[/QUOTE]

have you tried now a single moveStart('character', -1);
instead of those two statements?
[QUOTE]
}
r.execCommand ('Delete');
r.execCommand ('Unselect');
Note: if you want Delete (del) key behavior instead of BkSpc then don't
execute the r.move('character',-1) line of code.[/QUOTE]
[QUOTE]
Now I just have to figure out how to do this in Mozilla :-P[/QUOTE]
[QUOTE]
Will there ever be a unified DOM?[/QUOTE]

Why are you so mean and demand for salary cuts, what on earth do you
have on your mind? ;D

p.s.
I am not an active reader of cljs for some years now, so do tell if you
are done with this thread.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,013
Latest member
KatriceSwa

Latest Threads

Top