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[ 时，我该如何更改我的代码才能输入新值=30=] 例如。

Answer 1

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

像这样：

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

var newValue = clearValue + input;

jsfiddle

Javascript 键盘事件更改标记文本

Javascript Keyboard Event change marked text

html

javascript

keyboard

dom-events