js按鈕模擬鍵盤退格鍵定位刪除問題

求教各位前輩一個(gè)通過按鈕刪除input內(nèi)容的問題，具體需求是通過按鈕去刪除input內(nèi)容。
有三種方式：
1、末尾刪除：input不獲得焦點(diǎn)的情況下，點(diǎn)擊按鈕從內(nèi)容的最后一位開始刪除每次刪除一個(gè)字符
2、選中刪除：input獲得焦點(diǎn)，通過鼠標(biāo)選中部分內(nèi)容，點(diǎn)擊按鈕后，選中的內(nèi)容被全部刪除
3、插入刪除：input獲得焦點(diǎn)，將光標(biāo)定位到input內(nèi)容指定位置，點(diǎn)按鈕后，從定位到的位置開始刪除（假如input值是12345，光標(biāo)定位到4，點(diǎn)按鈕開始刪除，需要的效果是5之前的部分點(diǎn)一次按鈕刪除一個(gè)，最后只剩5）

以上三點(diǎn)需求，我自己1和2已經(jīng)實(shí)現(xiàn)，第三點(diǎn)遇到一個(gè)問題就是，光標(biāo)定位后點(diǎn)按鈕，只能刪除定位位置的前一位，下來再點(diǎn)按鈕，就直接從內(nèi)容的末尾開始刪除了。求教各位前輩指出問題的原因及用什么方法解決！！！謝謝

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<input id="test" value="1234567890"></input>
<button id="bttn_clear">刪除選中內(nèi)容</button>
<script>
    var test = document.getElementById('test');
    var test_value = test.value;
    var bttn_clear = document.getElementById('bttn_clear');

    function getCursortPosition(ctrl) {//光標(biāo)定位
        var CaretPos = 0;
        if (document.selection) {// IE Support
            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 select_range(type, str) {
        str = type.value;
        var start = type.selectionStart;
        var end = type.selectionEnd;
        var flg = end;
        var str_arry = [];
        str_arry = str.split("");
        if (end > start) {//選中刪除
            str_arry.splice(start, end - start);
        }
        else {
            if(start === end === 0){//末尾刪除
                str_arry.pop();
                console.log(start);
                console.log(end);
                console.log(flg);
            }
            else {//定位刪除
                str_arry.splice(getCursortPosition(test)-1,1);
                console.log(start);
                console.log(end);
                console.log(flg);
            }
        }
        str = str_arry.join("");
        type.value = str;
    }

    bttn_clear.onclick = function () {
        test_value = select_range(test, test_value);
    };

</script>
</body>

</html>

回答

編輯回答

孤巷

你的問題：

光標(biāo)定位后點(diǎn)按鈕，只能刪除定位位置的前一位，下來再點(diǎn)按鈕，就直接從內(nèi)容的末尾開始刪除了

原因：

光標(biāo)定位后點(diǎn)按鈕，只能刪除定位位置的前一位，

這個(gè)時(shí)候，已經(jīng)失去焦點(diǎn)了啊，既然失去焦點(diǎn)了，你

，下來再點(diǎn)按鈕，就直接從內(nèi)容的末尾開始刪除了

這個(gè)不就適用你前面定的第一個(gè)邏輯么？

1、末尾刪除：input不獲得焦點(diǎn)的情況下，點(diǎn)擊按鈕從內(nèi)容的最后一位開始刪除每次刪除一個(gè)字符

方法1：

光標(biāo)定位后點(diǎn)按鈕，只能刪除定位位置的前一位，

點(diǎn)完按鈕后，把光標(biāo)再重新定位到剛剛刪的位置前一位；

方法2：

如果方法1不行，那就仍然處于失去焦點(diǎn)狀態(tài)，那么可能會(huì)適用 1、末尾刪除，如果要不適用，給個(gè) flag=true,然后在這種情況下，繼續(xù)監(jiān)聽按鈕，如果仍然按，繼續(xù)刪除字符串，（但是這個(gè)時(shí)候，既然已經(jīng)失去焦點(diǎn)了，用戶怎么知道刪的是哪個(gè)）所以這個(gè)方法不太好；這種時(shí)候，我覺得直接適用 1、末尾刪除也沒什么不好，因?yàn)橛脩艨床坏浇裹c(diǎn)了，，，

2017年9月16日 09:48

編輯回答

久愛她

問題：第二次點(diǎn)擊按鈕時(shí)input失焦，ctrl.selectionStart值為0。
思路：新增一個(gè)全局變量lastCaretPos保存用戶光標(biāo)位置。
核心代碼：

//新增一個(gè)變量保存用戶上一次光標(biāo)位置。
var lastCaretPos = 0;
// Firefox support
else if (ctrl.selectionStart){
    CaretPos = ctrl.selectionStart;
    lastCaretPos = CaretPos-1;
}else{
    CaretPos = lastCaretPos--;
}

demo：https://codepen.io/WhiteYin/p...
總結(jié)：題目里說的12345刪到最后只剩一個(gè)5，我沒實(shí)現(xiàn)。

2017年1月14日 22:21