Input Controls

G

Gene Wirchenko

Dear JavaScripters:

I have some fine points that I would like to know how to do in
JavaScript. I do not know that they are even possible. Having them
would make data entry much easier.

1) Position to a particular point in a control's value. For
example, if entering a date, it could be much more user-friendly if,
when the control gets focus, the cursor were positioned just before
the days as in:
201112@29
where the at-sign represents the cursor. (In my app-to-be, the date
is usually in the current month, but not always.)

2) I want to be able to programmatically select part of an input
control value. e.g. Click on some part of the sentence below and
have that word and only that word selected
The quick, brown fox jumps over the lazy dog.
^
The quick, brown fox jumps over the lazy dog.
===== selected
or have the day of a date selected but not the rest.

Sincerely,

Gene Wirchenko
 
N

Norman Peelman

Dear JavaScripters:

I have some fine points that I would like to know how to do in
JavaScript. I do not know that they are even possible. Having them
would make data entry much easier.

1) Position to a particular point in a control's value. For
example, if entering a date, it could be much more user-friendly if,
when the control gets focus, the cursor were positioned just before
the days as in:
201112@29
where the at-sign represents the cursor. (In my app-to-be, the date
is usually in the current month, but not always.)

2) I want to be able to programmatically select part of an input
control value. e.g. Click on some part of the sentence below and
have that word and only that word selected
The quick, brown fox jumps over the lazy dog.
^
The quick, brown fox jumps over the lazy dog.
===== selected
or have the day of a date selected but not the rest.

Sincerely,

Gene Wirchenko
Click to expand...

Yes, it is possible. You need to look up 'selection' and 'range' in
respect to 'javascript'. As a quickly googled example, take a look at:

http://www.quirksmode.org/dom/range_intro.html

....and scroll down (about 3/4 page) to 'Creating a Range object from a
Selection object'

for some example code.
 
M

Martin Honnen

Gene said:
1) Position to a particular point in a control's value. For
example, if entering a date, it could be much more user-friendly if,
when the control gets focus, the cursor were positioned just before
the days as in:
201112@29
where the at-sign represents the cursor. (In my app-to-be, the date
is usually in the current month, but not always.)

2) I want to be able to programmatically select part of an input
control value. e.g. Click on some part of the sentence below and
have that word and only that word selected
The quick, brown fox jumps over the lazy dog.
^
The quick, brown fox jumps over the lazy dog.
===== selected
or have the day of a date selected but not the rest.
Click to expand...

For most browsers with the exception of IE 8 and earlier text controls
(like input type="text" and like textarea elements) expose properties
selectionStart
selectionEnd
and a method
setSelectionRange(startPos, endPos)
you can use, see
https://developer.mozilla.org/en/DOM/HTMLTextAreaElement#Properties
respectively
http://msdn.microsoft.com/en-us/library/ff974768(v=VS.85).aspx.

With earlier IE versions you can manipulate the selection with
http://msdn.microsoft.com/en-us/library/ms535869(v=VS.85).aspx, see
also the link in a previous response.
 
M

Mel Smith

Gene said:

">
1) Position to a particular point in a control's value. For
example, if entering a date, it could be much more user-friendly if,
when the control gets focus, the cursor were positioned just before
the days as in:
201112@29
where the at-sign represents the cursor. (In my app-to-be, the date
is usually in the current month, but not always.)
Click to expand...

Hi Gene:

I picked up and slightly modified the xhtml code below. Maybe you will
find it useful for positioning your cursor in the middle of a textarea:

HTH
-Mel Smith

********************
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Position Cursor in Textarea block</title>

<script type="text/javascript">

function setCursor(el,st,end) {
if(el.setSelectionRange) {
el.focus(); el.setSelectionRange(st,end);
}
else {
if(el.createTextRange) {
range=el.createTextRange();
range.collapse(true);
range.moveEnd('character',end);
range.moveStart('character',st);
range.select();
}
}
}
</script>
</head>
<body onload="setCursor(document.getElementById('input1'),13,13);" >
<div>
<textarea id="input1" name="input1" rows="10" cols="30">Happy kittens
dancing</textarea>
</div>
</body>
</html>
**********************
 
R

RobG

Dear JavaScripters:

     I have some fine points that I would like to know how to do in
JavaScript.  I do not know that they are even possible.  Having them
would make data entry much easier.

  1) Position to a particular point in a control's value.  For
example, if entering a date, it could be much more user-friendly if,
when the control gets focus, the cursor were positioned just before
the days as in:
          201112@29
where the at-sign represents the cursor.  (In my app-to-be, the date
is usually in the current month, but not always.)
Click to expand...

On my keyboard there is a delete key but no backspace key. For a
control behaving as suggested above, I would need click on the input,
then use fn+delete twice to delete the last two digits (or various
other key combinations that require more key presses).

Standard browser behaviour is to place the cursor where the user puts
it, or at the end of the content if it is put beyond the content, so
I'd only need to click beyond the content and press the delete key
twice.

If navigating using keys, the entire content is selected so I'd tab to
the control, then press the right cursor key to get to the end of the
content, then delete twice. That is slightly more effort than your
proposed scripted behaviour, but at least it is consistent everywhere
I visit and I don't need to learn different behaviour for your
particular site.

Therefore your modification requires more effort than the standard
behaviour (for me).

Also, there will be a certain surprise for visitors the first time
they click somewhere and the cursor doesn't go where they put it. How
long will it take them to realise that your site is different to all
the others that they use and learn to use it as efficiently as they
would if it had a standard interface?

  2) I want to be able to programmatically select part of an input
control value.  e.g.  Click on some part of the sentence below and
have that word and only that word selected
          The quick, brown fox jumps over the lazy dog.
                      ^
          The quick, brown fox jumps over the lazy dog.
                     ===== selected
Click to expand...

A double–click on a word already provides that behaviour, so all this
saves is the second click.
or have the day of a date selected but not the rest.
Click to expand...

When modifying standard browser behaviour you need to very carefully
consider whether such modifications are improvements or hinderances to
visitors. People tend to choose consistency over bespoke behaviour
even if performance for a particular case is better, probably because
the time and effort in learning customised behaviour is a greater cost
to performance than an interface with consistent behaviour.

Will the time and effort required to learn and adapt to individual
behaviour be recouped in greater efficiency? Is there is any saving in
efficiency at all in the suggested above changes?
 

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

Similar Threads

performance of modifying elements returned from getElementsByTagName 0
Initial letters of the words in a string 9
Alert and Input Control Events 7
<td> height problem 4
Seeking co-founders for my company. 1
String#include? with several possibilities? 4
word count 10
font face question 20

Members online

Total: 338 (members: 1, guests: 337)
Robots: 273

Forum statistics

Threads
473,968
Messages
2,570,149
Members
46,695
Latest member
StanleyDri

Latest Threads

Top