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.
JavaTearsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
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?
0
Alexandre SimõesManager / Technology SpecialistCommented:
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.
0
Alexandre SimõesManager / Technology SpecialistCommented:
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Alexandre SimõesManager / Technology SpecialistCommented:
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?
0
JavaTearsAuthor Commented:
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);
};
0
Alexandre SimõesManager / Technology SpecialistCommented:
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)?
0
JavaTearsAuthor Commented:
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
0
Alexandre SimõesManager / Technology SpecialistCommented:
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?
0
JavaTearsAuthor Commented:
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!!
0
Alexandre SimõesManager / Technology SpecialistCommented:
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?
0
JavaTearsAuthor Commented:
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!!
0
Alexandre SimõesManager / Technology SpecialistCommented:
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.
0
JavaTearsAuthor Commented:
Tried it but it did not work
0
Alexandre SimõesManager / Technology SpecialistCommented:
Hi mate, sorry for the delay but yesterday I had no time for EE.
Anyway, here's another attempt.
You can see the live code here
As jsfiddle doesn't work on old versions of IE you need to test it with this full screen result url
function focusEndofData(e) {
    setTimeout(function () {
        var len = e.value.length;
        if (e.setSelectionRange) {
            console.log('Using native setSelectionRange');
            e.setSelectionRange(len, len);
        } else {
            console.log('Using setSelectionRange Polyfil');
			var thisObj = e,
				nodeName = thisObj.nodeName.toUpperCase(),
				selRange;

			if( nodeName != "INPUT" && nodeName != "TEXTAREA" ) {
				return;
			}

			selRange = thisObj.createTextRange();
			selRange.collapse(true);
			selRange.moveStart('character', len);
			selRange.moveEnd('character', len);
			selRange.select();
        }
    }, 0);
};

Open in new window

I'm still not able to reproduce the behaviour you're experiencing, which is strange.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
JavaTearsAuthor Commented:
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?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.