Link to home
Start Free TrialLog in
Avatar of JavaTears
JavaTears

asked on

JavaScript - Cursor

I have two textFields displaying values 1234
On load, once I input JOHN, textField1 shows 1234JOHN which is alright.
Then I click tab, input SMITH and textField2 now displays S1234MITH instead of 1234SMITH.
How can the cursor jump to end of textField2 contents to add the new contents so that display will be 1234SMITH? Please let me know why does it do it on textField1 but not on textField2.

Part of the Code:
.
.
.
maxlength="18"  tabindex="${tabindex.next}"  onfocus="focusEndOfData (this);"  value="1234"  .......

Thank you.
Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image

By default, when you Tab into a textbox, the whole text is selected so if you start writing you just start clean.

In your case you're calling this: onfocus="focusEndOfData (this);"

The problem lies in there, can you show me the contents of this function?
I think what you have there is a problem related to what I believe is a bug in the browsers.

Changing your function to the following should solve it:
function focusEndofData(e) {
    setTimeout(function(){
       e.value = e.value
       e.focus();
    }, 0);
};

Open in new window

Basically is exactly what you have but wrapped in a setTimeout 0.
Apparently the browser still does its magic after the focus event but adding this setTimeout we're putting our code at the end of the execution queue and it won't get "overriden".

I don't know in which browser you're testing but in Chrome for instance the selection won't even disappear.
Browsers have different support for javascript functions, and here we have one of those issues.
To make it work everywhere you need to use this one:
function focusEndofData(e) {
    setTimeout(function () {
        if (e.setSelectionRange) {
            var len = e.value.length;
            e.setSelectionRange(len, len);
        } else {
            e.value = e.value;
        }
    }, 0);
};

Open in new window

Here's a working example you can test.

Also please keep all your comments in the scope of this question instead of replying directly to me.
It's better for you that might get proper feedback from more experts and at the end will be more useful for others in the future.
You say that the above code doesn't work but here's a live demo, can you try it out?

Do you have any other event handlers attached to your textboxes?
Avatar of JavaTears
JavaTears

ASKER

This is what the function now looks like, but it is still displaying S1234MITH instead of 1234SMITH.
How can I make all new entries jump to the end of contents in the textFields?

Code:
function focusEndofData(e) {
    setTimeout(function () {
        if (e.setSelectionRange) {
            var len = e.value.length;
            e.setSelectionRange(len, len);
        } else {
            e.value = e.value;
        }
    }, 0);
};
Some questions:

1. How are you adding the SMITH text? Manually or somehow automatically?

2. Do you have any other event handlers attached to those textboxes?

3. Are you able to reproduce that behaviour in my example (not in your application, directly in jsfiddle)?
1.  I am adding SMITH manually

2.  There are no other handlers attached to the textboxes

3. I could not replicate it because I was not able to input SMITH manually in
JsFiddle after 1234 display

4.  My jsp displays the < input text ..... Value = "1233" > on view very well but once I start entering my new input on focus, it jumps after the first key press and displays S1234MITH instead of 1234SMITH

5. I've tried using creatTextRange in focusEndofDat but it didn't work. I wonder what else to include
I think I'm missing something here.

What do you mean by
I was not able to input SMITH manually in
JsFiddle after 1234 display
Why?
You have 2 textboxes there with 1234 preset. Setting the focus on the first (clicking on it) and then pressing TAB to move to the next one and type SMITH.

What's the problem?
Well that's the problem I need help on because it works on one system I'm testing it on but doesn't work on the other. Hence I need to know if there is something else I should add to the focus or try something else; hence my questions. The result should always be stabe!!
Ok, but I would suggest to one for now and make it work, and then figure out everything.

As the jsFiddle example is the only environment we can collaborate, let's stick with it and make it work.
If it works there, it will be easier for me to then help you make it work everywhere.

Do you agree?
Hi, thanks for your great suggestion!

This is the problem: It does not work well on IE11 compatible mode.

So I would appreciate it if you can tell me HOW TO MAKE IT WORK ON IE11 COMPATIBLE mode. That will solve the problem.

Thanks Alex!!
Ok, so for that, can't you simply add this to beginning of the head of your page?
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Open in new window

IE11 in compatibility mode falls all the way down into IE7 emulation.
Needless to say, IE7 is a very old version with very limited javascript support.
Using the line above you force the page to bump back up into Edge.
Tried it but it did not work
ASKER CERTIFIED SOLUTION
Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
When I try yours on jsFiddle it works but when inserted in mine, it does not work.

Is it a matter of how I set it up to display?