Question

我正在用jquery和html组装键盘以进行触摸设计，并且试图找出当单击div.delete按钮时如何删除文本框中的特定文本。现在我正在这样做：

我的html：

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

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

我的jquery：

$( ".delete" ).click(function() {
    $('#name').val(
        function(index, value){
            return value.substr(0, value.length - 1);
    })
});

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

单击div时，我失去了输入focus（）。有人可以告诉我如何使用jquery或javascript吗？

Answer 1

您可以更改mousedown事件的事件处理程序。有了return false语句，您就不会失去输入重点。

$(".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;
});

Answer 2

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

const deleteBtn = document.querySelector("#delete");

deleteBtn.addEventListener("click", function(event) {
  event.preventDefault(); // here we're preventing the original event side-effects
  const input = document.querySelector("input[name=name]");
  const originalSelectionEnd = input.selectionEnd; // this will store current cursor position in the input field
  if (originalSelectionEnd > 0) { // as if we're at the beginning of the input there is nothing to delete
    input.value = input.value.slice(0, input.selectionEnd - 1) + input.value.slice(input.selectionEnd); // we're setting new value to the original value without a character before the cursor position
    input.selectionEnd = originalSelectionEnd - 1; // setting new cursor position
  }
  input.focus(); // and finally focus input element
});

<input type="text" name="name" />

<a id="delete">&larr; DELETE</a>

Answer 3

尝试

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

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

3 个答案: