Javascript键盘事件更改标记文本

Question

我有一个如下所示的输入字段:

<input type="text" name="definemonth" value="'.$monthStart.'" class="form-control"
onkeypress="return isNumberKey(event, this.value);" />

为了只允许 1 到 28 之间的数字(每个都包含在内)，我编写了这段 JS 代码:

var input = event.key;
var newValue = value + input;

if(input == "ArrowLeft" || input == "ArrowRight" || input == "ArrowUp" ||
   input == "ArrowDown" || input == "Backspace" || input == "Delete" || input == "Enter")
{
    return true;
}

if (!input.match("^[0-9]$") || newValue > 28 || newValue < 1)
{
    return false;
}

return true;

它基本上按照我想要的方式工作。我希望能够使用箭头键、退格键和删除按钮，一切都很好。但问题是我无法标记文本然后添加新数字。我所说的标记是指这种标记:标记工作正常，但任何击键都不会改变任何内容。

我尝试检测

console.log(input);

那里发生了什么，但我在控制台中根本没有得到任何输出。

我的问题是那么我该如何更改代码才能在标记文本并输入 1 时输入新值。

Answer 1

在检查新的允许值之前，您应该清除选定的文本。

像这样:

var clearValue = element.value;
clearValue = clearValue.slice(0, element.selectionStart) + clearValue.slice(element.selectionEnd);

var newValue = clearValue + input;

jsfiddle