用jquery输入文本大写拉丁字母

时间:2015-12-28 11:27:13

标签: jquery css html5

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

text-transform:大写是工作正常但我有一个问题是什么时候我按下“i”它显示“我”我想看拉丁语“İ”我怎么能做这个jquery或其他方式?

1 个答案:

答案 0 :(得分:1)

我有一个解决方案。它不是很优雅,但它可以完成这项工作。

基本上,每当在输入中按下i键时,我们就会阻止它发生,而是插入我们的特殊字符。

&#13;
&#13;
// 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], "İ");
    }
});
&#13;
<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">
&#13;
&#13;
&#13;

Here's a fiddle,如果您愿意的话。

不幸的是,我找不到任何干净的CSS解决方案,但正如我所说,这应该可以胜任。