Transform string into uppercase jquery

Question

All the data in the system must be save as uppercase, with some exceptions (passwords, emails, login...), so I create a css to do the visual trick

input[type="text"], textarea { text-transform:uppercase; }
.small_case { text-transform:smallcase !important; }

using the small_case class to the fields that are exception (the passwords doesn't need this).

But as you all know, this will keep the value on the server-side as the user input it.

Example:

input: Abcd
visual: ABCD
server: Abcd

So I did a jQuery function to "fix" the problem:

$(document).ready(function () {
    $("input, textarea").on('keypress blur', function () {
        if ($(this).hasClass('small_case')) {
            $(this).val($(this).val().toLowerCase());
        }
        else {
            $(this).val($(this).val().toUpperCase());
        }
    });
});

PS: Why am I using keypress AND blur ?

right-click and paste a value into an input
press enter-key to save or do a search
result: the value will be as the user input. not as uppercase

BUT, I HAVE A SMALL PROBLEM

In some inputs I use a mask component, that creates the basic structure

Example:

value input: ABC1234
mask input: _ _ _ _ _ _ _
while input: AB_ _ _ _ _ ; ABC12_ _ ;

Using the jQuery code above, the Caret will be positioned at the end

Example:

A_ _ _ _ _ _| (where | is my caret cursor)

What I was trying to do, but not sure how or if this is the right/best solution?

Find via regex what's the index of the last character with the same keycode as the character that I last typed and set the carat to that position.
Using only blur, will avoid the problem, but I fall under the PS below the jQuery code.

So... any advice?

You should enforce this in the middle tier instead of the front end — cfs, Aug 14 '13 at 17:42
I handled it on the server using `[UpperCase]` on each column that I needed. But, it took a lot of performance. Also is inviable to use `.ToUpper()` on the server, if the client change his mind, will give a terrible extra work to change it back. — Michel Ayres, Aug 14 '13 at 17:45
@Michel The problem is that enforcing this on the front end isn't enforcing this at all. Someone can just use a program like Fiddler to send whatever values they want to your server. Is that risk something that you are ok with? — Gray, Aug 14 '13 at 17:49
For the masking, there is a plugin: http://digitalbush.com/projects/masked-input-plugin/ — Roy J, Aug 14 '13 at 18:09
@RoyJ this is the plugin we're using. He create a basic visual like __/__/____ for date. with the jquery that I made, I'll get all value and past it again, so the caret will be in the last position (the / and _ will be copied and pasted in the field) — Michel Ayres, Aug 14 '13 at 18:12
@Gray I agree with you in the business layer, but as I said in [this comment](http://stackoverflow.com/questions/18238598/transform-string-into-uppercase-jquery?noredirect=1#comment26740568_18238598) the way I tried took a lot of performance. :( — Michel Ayres, Aug 14 '13 at 18:16
@Michel Sometimes it is worth the performance sacrifice to have a secure application. That being said, I cannot imagine how `.ToUpper()` would severely hurt your performance, or honestly, why case even matters. — Gray, Aug 14 '13 at 19:42

score 0 · Answer 1 · edited May 23 '17 at 11:49

You should probably do the following:

Use text transformation to fix what the user sees
Capitalize on the server when the values come from the client

If for whatever reason you still want to do it the way you are trying, then you would have to modify the cursor position of each textbox after you modify the text in jquery.

Look at some of the answers in the following post: With jQuery, how do I capitalize the first letter of a text field while the user is still editing that field?

Transform string into uppercase jquery

BUT, I HAVE A SMALL PROBLEM

What I was trying to do, but not sure how or if this is the right/best solution?

1 Answers1