在输入中设置插入位置以便在可以编辑内容时在关键字上设置大写字母

Question

我决定打开一个新问题，因为我试图大写第一个带有4个或更多字母的单词并除少数关键词和我对这个工作代码：http://jsfiddle.net/Q2tFx/11/

$.fn.capitalize = function() { 
var wordsToIgnore = ["to", "and", "the", "it", "or", "that", "this"], 
    minLength = 3; 

    function getWords(str) { 
    return str.match(/\S+\s*/g); 
    } 
    this.each(function() { 
    var words = getWords(this.value); 
    $.each(words, function (i, word) { 
     // only continue if word is not in ignore list 
     if (wordsToIgnore.indexOf($.trim(word).toLowerCase()) == -1 && $.trim(word).length > minLength) { 
     words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1); 
     } 
    }); 
    this.value = words.join(""); 
    }); 
}; 

$('.title').on('keyup', function() { 
    $(this).capitalize(); 
}).capitalize(); 

但是我有一个问题，而在“KEYUP”运行功能。 我无法在输入中间编辑某些内容，而无法将光标置于输入末尾。而我也不能“全选”。

我知道有解决方案来获得插入位置并照顾这样的事情，但我真的不知道如何将它们集成到我的代码中。

任何想法我怎么能做到这一点？

Answer 1

你能做到这一点，利用两个功能，从这里开始：http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea

见工作的jsfiddle：http://jsfiddle.net/Q2tFx/14/

$.fn.capitalize = function (e) { 
    if(e.ctrlKey) return false; 
    var wordsToIgnore = ["to", "and", "the", "it", "or", "that", "this"], 
    minLength = 3; 

    function getWords(str) { 
    return str.match(/\S+\s*/g); 
    } 
    this.each(function() { 
    var words = getWords(this.value); 
    $.each(words, function (i, word) { 
     // only continue if word is not in ignore list 
     if (wordsToIgnore.indexOf($.trim(word).toLowerCase()) == -1 && $.trim(word).length > minLength) { 
     words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1); 
     } 
    }); 
    var pos = getCaretPosition(this); 
    this.value = words.join(""); 
    setCaretPosition(this, pos); 
    }); 
}; 

$('.title').on('keyup', function (e) { 
    var e = window.event || evt; 
    if(e.keyCode == 17 || e.which == 17) return false; 
    $(this).capitalize(e); 
}).capitalize(); 


function getCaretPosition (ctrl) { 
    var CaretPos = 0; // IE Support 
    if (document.selection) { 
    ctrl.focus(); 
     var Sel = document.selection.createRange(); 
     Sel.moveStart ('character', -ctrl.value.length); 
     CaretPos = Sel.text.length; 
    } 
    // Firefox support 
    else if (ctrl.selectionStart || ctrl.selectionStart == '0') 
     CaretPos = ctrl.selectionStart; 
    return (CaretPos); 
} 
function setCaretPosition(ctrl, pos){ 
    if(ctrl.setSelectionRange) 
    { 
     ctrl.focus(); 
     ctrl.setSelectionRange(pos,pos); 
    } 
    else if (ctrl.createTextRange) { 
     var range = ctrl.createTextRange(); 
     range.collapse(true); 
     range.moveEnd('character', pos); 
     range.moveStart('character', pos); 
     range.select(); 
    } 
} 

注意

你应该在你利用功能纳入该两项功能范围