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

Question

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

| 1/2^ inches |

或

| ^ inches |

Answer 1

这是demo。

诀窍是将“英寸”添加到输入值，然后使用selectionStart和selectionEnd属性相应地移动光标。

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