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

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

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

<!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">刪除選中內容</button>
<script>
    var test = document.getElementById('test');
    var test_value = test.value;
    var bttn_clear = document.getElementById('bttn_clear');

    function getCursortPosition(ctrl) {//光標定位
        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>

回答

編輯回答

孤巷

你的問題：

光標定位后點按鈕，只能刪除定位位置的前一位，下來再點按鈕，就直接從內容的末尾開始刪除了

原因：

光標定位后點按鈕，只能刪除定位位置的前一位，

這個時候，已經失去焦點了啊，既然失去焦點了，你

，下來再點按鈕，就直接從內容的末尾開始刪除了

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

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

方法1：

光標定位后點按鈕，只能刪除定位位置的前一位，

點完按鈕后，把光標再重新定位到剛剛刪的位置前一位；

方法2：

如果方法1不行，那就仍然處于失去焦點狀態(tài)，那么可能會適用 1、末尾刪除，如果要不適用，給個 flag=true,然后在這種情況下，繼續(xù)監(jiān)聽按鈕，如果仍然按，繼續(xù)刪除字符串，（但是這個時候，既然已經失去焦點了，用戶怎么知道刪的是哪個）所以這個方法不太好；這種時候，我覺得直接適用 1、末尾刪除也沒什么不好，因為用戶看不到焦點了，，，

2017年9月16日 09:48

編輯回答

久愛她

問題：第二次點擊按鈕時input失焦，ctrl.selectionStart值為0。
思路：新增一個全局變量lastCaretPos保存用戶光標位置。
核心代碼：

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

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

2017年1月14日 22:21