Javascript键盘事件更改标记文本

Question

我有一个输入字段，如下所示：

   Crop_1 Crop_2  Ecoregion  2002_Count  2003_Count
0    Corn    Soy         46          20          24
1  Barley   Oats         46          15          18

只允许1到28之间的数字（包括每个数字）我写了这个JS代码：

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

它主要按照我的要求运作。我希望能够使用箭头键，退格键和删除按钮，这一切都很好。但问题是我无法标记文本然后添加新数字。标记我指的是这种标记： 标记工作正常，但任何按键都不会改变任何东西。

我试图用

检测

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;

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

我的问题是那么如何更改我的代码，以便在标记文本时输入新值，例如我输入1。

Answer 1

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

像这样：

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

var newValue = clearValue + input;

jsfiddle