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

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;
});