账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    js按钮模拟键盘退格键定位删除问题
    • 纯天然无毒无添加防腐剂2018-01-29 00:00
    15
    0

    求教各位前辈一个通过按钮删除input内容的问题,具体需求是通过按钮去删除input内容。
    有三种方式:
    1、末尾删除:input不获得焦点的情况下,点击按钮从内容的最后一位开始删除每次删除一个字符
    2、选中删除:input获得焦点,通过鼠标选中部分内容,点击按钮后,选中的内容被全部删除
    3、插入删除:input获得焦点,将光标定位到input内容指定位置,点按钮后,从定位到的位置开始删除(假如input值是12345,光标定位到4,点按钮开始删除,需要的效果是5之前的部分点一次按钮删除一个,最后只剩5)

    以上三点需求,我自己1和2已经实现,第三点遇到一个问题就是,光标定位后点按钮,只能删除定位位置的前一位,下来再点按钮,就直接从内容的末尾开始删除了。求教各位前辈指出问题的原因及用什么方法解决!!!谢谢

    <!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>
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 红尘陌染 普通会员 1楼

      在JavaScript中,我们可以使用事件监听器来模拟键盘退格键。以下是一个简单的例子:

      javascript document.getElementById('myButton').addEventListener('keydown', function(event) { if (event.keyCode === 87) { // 可选,你可能需要添加更多的条件来处理不同类型的键盘事件 var item = document.getElementById('myItem'); item.parentNode.removeChild(item); } });

      在这个例子中,我们监听了当用户按下键盘上的87键时的事件。如果是键盘上的退格键,我们就从父元素中删除该元素。

      注意,这个例子假设你的HTML元素有一个id为'myItem'的子元素。如果你的元素的id不同,你需要修改这个代码来匹配你的元素。

      此外,这个例子也没有处理可能的键盘事件,例如Ctrl+Tab或Ctrl+Backspace等。你可能需要根据你的实际需求来添加更多的逻辑来处理这些事件。

      最后,这个例子只是模拟了键盘退格键,实际的删除操作需要使用更复杂的逻辑,例如使用JavaScript的delete方法。

    更多回答
    扫一扫访问手机版