如何在使用Jquery/Javascript单击div in时删除文本框中的选定文本

我正在用jquery和html为touch设备构建一个键盘，我试图弄清楚如何在单击div.delete按钮时删除文本框中的特定文本。现在我正在这样做：

我的html：

<input type="text" name="name" id="name"/>

<div class="delete key-btn">&larr; DELETE</div>

问题是我只能从最后一个字符开始删除文本。如果用户需要删除另一个字符，例如：Pablo的“a”，他就不能删除

---

单击div时，我将失去输入焦点（）。有人能告诉我如何使用jquery或javascript实现这一点吗？

您可以更改

鼠标向下

事件的事件处理程序。这样一来，

returnfalse

语句可以帮助您不丢失输入焦点

$(".delete").on("mousedown",function(evt) {
        var nameInput = document.querySelector("#name")
        var cursorPosition = nameInput.selectionStart;

    $("#name").val(
        function(index, value){
            return value.substr(0,cursorPosition - 1) + value.substr(cursorPosition);
    });

    nameInput.selectionStart = cursorPosition - 1;
    nameInput.selectionEnd = cursorPosition - 1;

    return false;
});

---

您可以更改

mousedown

事件的事件处理程序。这样一来，

returnfalse

语句可以帮助您不丢失输入焦点

$(".delete").on("mousedown",function(evt) {
        var nameInput = document.querySelector("#name")
        var cursorPosition = nameInput.selectionStart;

    $("#name").val(
        function(index, value){
            return value.substr(0,cursorPosition - 1) + value.substr(cursorPosition);
    });

    nameInput.selectionStart = cursorPosition - 1;
    nameInput.selectionEnd = cursorPosition - 1;

    return false;
});

---

我添加了一个带有注释的代码段，基本上您需要读取当前光标位置并在给定位置剪切字符。如果不想失去对输入元素的关注，只需在更改输入值后再次调用

focus（）

：

constdeletebtn=document.querySelector（“#delete”）；
deleteBtn.addEventListener（“单击”），函数（事件）{
event.preventDefault（）；//这里我们要防止原始事件的副作用
const input=document.querySelector（“input[name=name]”）；
const originalSelectionEnd=input.selectionEnd；//这将在输入字段中存储当前光标位置
如果（originalSelectionEnd>0）{//就好像我们在输入的开头一样，没有什么可以删除的
input.value=input.value.slice（0，input.selectionEnd-1）+input.value.slice（input.selectionEnd）；//我们正在将新值设置为原始值，光标位置前不带字符
input.selectionEnd=originalSelectionEnd-1；//设置新光标位置
}
focus（）；//最后是focus输入元素
});

&larr；删除
我添加了一个带有注释的代码段，基本上您需要读取当前光标位置并在给定位置剪切字符。如果不想失去对输入元素的关注，只需在更改输入值后再次调用
focus（）
：


constdeletebtn=document.querySelector（“#delete”）；
deleteBtn.addEventListener（“单击”），函数（事件）{
event.preventDefault（）；//这里我们要防止原始事件的副作用
const input=document.querySelector（“input[name=name]”）；
const originalSelectionEnd=input.selectionEnd；//这将在输入字段中存储当前光标位置
如果（originalSelectionEnd>0）{//就好像我们在输入的开头一样，没有什么可以删除的
input.value=input.value.slice（0，input.selectionEnd-1）+input.value.slice（input.selectionEnd）；//我们正在将新值设置为原始值，光标位置前不带字符
input.selectionEnd=originalSelectionEnd-1；//设置新光标位置
}
focus（）；//最后是focus输入元素
});

&larr；删除
试试这个

$(".delete").click(function() {
  var $name = $('#name')[0];
  var val = $('#name').val();
  $('#name').val(val.substring(0, $name.selectionStart) + val.substring($name.selectionEnd));
});

试试这个

$(".delete").click(function() {
  var $name = $('#name')[0];
  var val = $('#name').val();
  $('#name').val(val.substring(0, $name.selectionStart) + val.substring($name.selectionEnd));
});

不。它仍然在删除最后一个字符：（很好的解决方案！我喜欢它。谢谢！不。它仍然在删除最后一个字符：（很好的解决方案！我喜欢它。谢谢！