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