Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #9777 > unrolled thread

Input Controls

Back to article view | Back to comp.lang.javascript

Contents

  Input Controls Gene Wirchenko <genew@ocis.net> - 2011-12-29 18:11 -0800
    Re: Input Controls Norman Peelman <npeelmandog@cfl.rr.com> - 2011-12-30 06:40 -0500
    Re: Input Controls Martin Honnen <mahotrash@yahoo.de> - 2011-12-30 12:57 +0100
    Re: Input Controls "Mel Smith" <med_cutout_syntel@aol.com> - 2011-12-30 10:49 -0700
    Re: Input Controls RobG <rgqld@iinet.net.au> - 2011-12-31 15:21 -0800

#9777 — Input Controls

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
 

[toc] | [next] | [standalone]

#9780

On 12/29/2011 09:11 PM, Gene Wirchenko wrote:
> 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
>

   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.

-- 
Norman
Registered Linux user #461062
AMD64X2 6400+ Ubuntu 10.04 64bit

[toc] | [prev] | [next] | [standalone]

#9781

Gene Wirchenko wrote:

>    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.

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%28v=VS.85%29.aspx.

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


-- 

	Martin Honnen --- MVP Data Platform Development
	http://msmvps.com/blogs/martin_honnen/

[toc] | [prev] | [next] | [standalone]

#9801

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.)

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>
**********************

[toc] | [prev] | [next] | [standalone]

#9829

On Dec 30 2011, 12:11 pm, Gene Wirchenko <ge...@ocis.net> wrote:
> 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.)

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

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.

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?

--
Rob

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web