Input text uppercase latin letter with jquery

Question

<input class="js-filter form-control" type="text" value="" style="text-transform:Uppercase">

text-transform:Uppercase is work fine but I have one issue about what is when i press lower "i" it show "I" i want to see latin "İ" how can i do this jquery or another way?

@HashemQolami We'd not expect `text-transition` while we have `transition` which will do the most. — Bhojendra Rauniyar, Dec 28 '15 at 11:34
There's no capital 'dotted I' in the latin aplhabet. Do you mean the Turkish alphabet? — Tom Brunberg, Dec 28 '15 at 13:21

score 1 · Accepted Answer · answered Dec 28 '15 at 12:28

I've got a solution. It isn't exactly elegant, but it does the job.

Basically, whenever the i key is pressed inside the input, we stop it from happening and instead insert our special character.

// From SO: http://stackoverflow.com/a/1064139/2205195
function insertAtCaret(elem,text) {
    var txtarea = elem;
    var scrollPos = txtarea.scrollTop;
    var strPos = 0;
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
        "ff" : (document.selection ? "ie" : false ) );
    if (br == "ie") { 
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        strPos = range.text.length;
    }
    else if (br == "ff") strPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0,strPos);  
    var back = (txtarea.value).substring(strPos,txtarea.value.length); 
    txtarea.value=front+text+back;
    strPos = strPos + text.length;
    if (br == "ie") { 
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        range.moveStart ('character', strPos);
        range.moveEnd ('character', 0);
        range.select();
    }
    else if (br == "ff") {
        txtarea.selectionStart = strPos;
        txtarea.selectionEnd = strPos;
        txtarea.focus();
    }
    txtarea.scrollTop = scrollPos;
}

$(".js-filter").keydown(function(event){
 if (event.which == 73) {
      event.preventDefault();
      insertAtCaret($(this)[0], "İ");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="js-filter form-control" type="text" value="" style="text-transform:Uppercase">

Here's a fiddle, if you prefer.

Unfortunately, I couldn't find any nice clean CSS solution, but as I said, this should do the job.

it work very good but change the event.which== 222 else is not work — Erhan Uslu, Dec 28 '15 at 12:38

Input text uppercase latin letter with jquery

1 Answers1