HTML Input field, remember the cursor location

Question

I have an application with an Input field which needs to be converted to Uppercase as soon as the User enters a character. This is working as expected.

But if the user tries to enter a character between an already existing word, the cursor is pushed to the end of the Input field. Is there a way I can keep the cursor in the proper location?

Before you down vote, I did check out posts in Stack Overflow and other places. Couldn't find a proper solution. Do provide your feedback.

JSFiddle Link

$(function() {
  $("#referenceNo").on('keyup change', function(e) {
    $(this).val($(this).val().toUpperCase());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="referenceNo">Reference No</label>
<br/>
<input type="text" id="referenceNo" name="referenceNo" value="HELLO WORLD!" />

Try to input a character between "Hello World!", the cursor will be pushed to the end of the word. This needs fixing..

ssilas777 · Accepted Answer · 2015-08-26 12:25:31Z

2

Try this, You can use setSelectionRange Working Fiddle

$(function () {
    $("#referenceNo").on('keyup change', function (e) {            
        var startPos = this.selectionStart,
        endPos = this.selectionEnd;    

        $(this).val($(this).val().toUpperCase());    
        // restore cursor
        this.setSelectionRange(startPos, endPos );

    });
});

Also you can use pure CSS

   #referenceNo {
     text-transform: uppercase
   }

answered Aug 26, 2015 at 12:25

ssilas777

9,7704 gold badges48 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DontVoteMeDown Over a year ago

The css solution is nice! Where did you found it?

LearningDeveloper Over a year ago

Tried this, it works. Will be using this code for now. Thanks. Will keep the question open for a day or so to see if a better answer turns up.

DontVoteMeDown · Accepted Answer · 2015-08-26 12:25:40Z

2

I suggest you to do this by CSS. Add text-transform property to the element:

#referenceNo {
    text-transform: uppercase
}

No script needed.

Fiddle

answered Aug 26, 2015 at 12:25

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

1 Comment

LearningDeveloper Over a year ago

In the JS code, I still am getting small characters. This is a neat trick, did see it in one of the other question but not useful in my case. Thanks for the suggestion.

Yash Mangla · Accepted Answer · 2015-08-26 13:21:03Z

1

You Can Achieve visualization by CSS and for value sending to server you can use javascript.

Like: this is CSS Code

#abc {
    text-transform: uppercase
}

this is HTML:

<input class="form-control" type="text" id="abc" />

this is javascript:

$("#abc").on("change", function(){ var x = $("#abc").val().toUpperCase(); });

you can use "keyup" event for instant value if you have not required then you don't have need to bind extra event with your code.

answered Aug 26, 2015 at 13:21

Yash Mangla

1339 bronze badges

2 Comments

LearningDeveloper Over a year ago

Thanks, Appreciate the simpler solution.

LearningDeveloper Over a year ago

Yup, just did. Was away for the weekend, so the delay.

Collectives™ on Stack Overflow

HTML Input field, remember the cursor location

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related