js實(shí)現(xiàn)按一下刪除鍵刪除整個(gè)單詞附demo

字號(hào):


    易賢網(wǎng)網(wǎng)校上線了!
    >>>點(diǎn)擊進(jìn)入<<<
    網(wǎng)校開發(fā)及擁有的課件范圍涉及公務(wù)員、財(cái)會(huì)類、外語類、外貿(mào)類、學(xué)歷類、
    職業(yè)資格類、計(jì)算機(jī)類、建筑工程類、等9大類考試的在線網(wǎng)絡(luò)培訓(xùn)輔導(dǎo)。
    在文本框倒敘輸入一文中提到了設(shè)置文本框焦點(diǎn)的javascript代碼,今天就使用這段代碼來做一個(gè)Demo。內(nèi)容就是當(dāng)刪除單詞時(shí)就一次性刪除整個(gè)單詞
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style>
    .content {width: 300px;margin: 0 auto;}
    </style>
    <script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
    </head>
    <body>
    <div>
    <textarea name="" id="demo" cols="30" rows="10"></textarea>
    </div>
    <script>
    var getCursortPosition = function(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);
    };
    var selectSomeText = function(element,begin,end)
    {
    if (element.setSelectionRange)
    {
    element.setSelectionRange(begin,end);
    }
    else if (element.createTextRange)
    {
    var range = element.createTextRange();
    range.moveStart("character",begin);
    range.moveEnd("character",end);
    range.select();
    }
    };
    var delWholeWord = function(text, field, pos){
    var startIndex = pos;
    if (field.charAt(pos-1) !== ' '){
    for (var i=pos-2;i>=0;i--){
    if (field.charAt(i) === ' ' || i === 0){
    startIndex = i;
    break;
    }
    }
    selectSomeText(text, startIndex, pos)
    }
    };
    $('#demo').keydown(function(event) {
    if(event.keyCode !== 8) {
    return;
    }
    var bodyText = $(this)[0];
    var bodyField = $(this).val();
    var pos = getCursortPosition(bodyText);
    delWholeWord(bodyText, bodyField, pos);
    });
    </script>
    </body>
    </html>