-
爷的范你学不来2018-01-29 00:00
- 10
- 47
- 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 条
- 全部回答
-
乆違的感覺 普通会员 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方法。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部