在輸入中設置插入位置以便在可以編輯內容時在關鍵字上設置大寫字母

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(); 
    } 
} 

注意

你應該在你利用功能納入該兩項功能範圍