求教各位前辈一个通过按钮删除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>
在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方法。