jquery - Jquery将后缀附加到字符串并将光标向左移动

Question

我有一个文本输入框，我想在用户单击该框或键入时自动将“英寸”作为后缀添加到用户输入中。所以基本上当用户在框中输入输入时，单词inches会出现在他们光标的右侧，但他们的光标将保留在in后缀的左侧。我尝试使用自动数字库，它可以很好地完成这类事情，但我无法弄清楚如何让它允许分数的斜杠。下面是一个带有 | 的示例 表示框的边缘，^ 表示光标。

| 1/2^ inches |

或者

| ^ inches |

Answer 1

这是一个演示。

诀窍是在输入值中添加“英寸”，然后使用selectionStartandselectionEnd属性相应地移动光标。

Javascript：

$("#mytext").on("click keyup", function(){
    var value = $(this).val();
    var output = value.substring(0, value.length - 7) + " inches";
    var cursorPosition = output.length - 7;
    $(this).val(output);
    $(this)[0].selectionStart = $(this)[0].selectionEnd = cursorPosition;
});