JQuery keyup prevents text selecion in Chrome. How to solve?

Question

I have a function that transforms the text to uppercase on keyup. The code looks like this (I think I found it on SO too):

$(selector).bind('keyup', function (e) {
  if (e.which >= 97 && e.which <= 122) {
    var newKey = e.which - 32;
    e.keyCode = newKey;
    e.charCode = newKey;
  }
  $(this).val((object.val()).toUpperCase());
});

The problem

In Chrome, when I type some text and then try to select it using shift + home, the cursor goes back to the last char, not selecting anything.

I also tested in Firefox and IE and it's working ok.

Please help me

Hi! A jsFiddle would be appreciated... – Armel Larcier Oct 10 '12 at 13:23 — Armel Larcier, Oct 10 '12 at 13:23

score 2 · Accepted Answer · answered Oct 10 '12 at 13:25

One of possible solutions is not changing value on every keyup, but just when the value actually changes:

$('#input').bind('keyup', function(e) {

    if (e.which >= 97 && e.which <= 122) {
        var newKey = e.which - 32;
        e.keyCode = newKey;
        e.charCode = newKey;
    }

    var oldVal = $(this).val();
    var newVal = oldVal.toUpperCase();

    if(oldVal != newVal)
    {
        $(this).val(newVal);
    }

});

See it in JSFIDDLE.

Sometimes the you got blind and don't think simple. Thanks! – Oct 10 '12 at 13:27 — , Oct 10 '12 at 13:27

Andbdrew · Answer 2 · 2012-10-11T16:06:33.163

2

There is a nice solution using only css here:

http://jsfiddle.net/46jrg/

just apply

text-transform: uppercase

to the text input region, and then you don't have to worry about that complicated javascript stuff. Less code means less bugs! :)

EDIT: When you select and copy the text, it will still be capitalized, but if you're submitting it to a server, you will have to either upcase it before send or upcase it when it gets there. This is normally no big deal though. Most common server-side languages can do it in a single method call.

Java has String::toUpperCase

PHP has the strtoupper function

Python has String::upper

Ruby has String::upcase

Perl has the uc function

Javascript has String::toUpperCase

C#.NET / VB.NET has String::ToUpper

edited Oct 11 '12 at 16:06

answered Oct 10 '12 at 13:27

Andbdrew

11,788
4
33
37

Last time I tried this, on an input form it doesn't change the value that is being submitted. It is used for display only. – Cymbals Oct 10 '12 at 13:35
Agreed, though the OP just wanted to be able to select the capitalized text. I'll update my answer though. :) – Andbdrew Oct 10 '12 at 13:46
1

Surely you can just do a `.ToUpper()` (language dependant) or similar in the part where you're sending the data? – RemarkLima Oct 10 '12 at 13:52
1

@RemarkLima yeah, you're right. I edited my answer to include a handful of easy ways to deal with this. – Andbdrew Oct 10 '12 at 15:47
1

And C#.NET / VB.NET is `"str".ToUpper()` – RemarkLima Oct 11 '12 at 09:09

JQuery keyup prevents text selecion in Chrome. How to solve?

2 Answers2