javascript - 如何将两个按钮的值添加到单个输入框？

Question

假设我有两个按钮，其值分别为 'abc' 和 'efg'，以及一个输入框。

这就是我想要实现的:

• 当我单击具有值 'abc' 的按钮一次时，值 'a' 会附加到输入框。如果我立即按两次，值突然变为 'b' 而不是 'a'，当我按下三次时，它变为 'c ' 而不是 'b'。

• 我应该能够输入双 'a'(或任何 'a'、'b' , 'c') 通过在按钮 'abc' 上的按钮点击之间等待一段时间。例如:我先点击按钮 'abc'，然后 'a' 进入输入框，我等了一会儿，再点击一次得到另一个 'a'.

• 我希望所有按钮('abc' 和 'efg')具有相同的功能。

我已链接示例预期输出图像。

查看此 jsfiddle Code

<div ng-controller="MyCtrl">
    <input type="text" ng-model="btnTxt[btnarr]">
    <button ng-modle="btnarr" ng-Click="change()">abc</button>
</div>

预期输出:

谁能帮我解决这个问题？

Answer 1

我试过一个不使用内置定时器功能的方法，而是手动检查。

Solution at Pastebin : pastebin.com/vHF517FN

看看它是否适合您。顺便说一句，我并没有真正重构太多，如果你对此感到满意，我会这样做(我也是 js 的新手 -_-)。

编辑

无论如何都要重构。

Refactored Solution at Pastebin : pastebin.com/EnHz2EHK

编辑 2

将其添加到 JSFiddle。但是，我必须将所有内容添加到 HTML 部分才能使其在那里工作，将脚本移动到脚本部分对我不起作用(想知道为什么)。

Solution at JSFiddle

<script>
 var prevClick = '!';
 var prevClickTime;
 var clicks = 0;

 function buttonClick(letters) {
    var input = document.getElementById("put");
    var backLetterIndex = (clicks == 0) ? letters.length-1 : clicks - 1;

    if(letters[backLetterIndex] == prevClick) {
    var now = (new Date()).getTime();

    if(now - prevClickTime < 500) {
        var val = input.value;
        input.value = val.slice(0, val.length - 1);
    }
    else
        clicks = 0;

    }
    else 
    clicks = 0;

    prevClickTime = (new Date()).getTime();
    prevClick = letters[clicks];
    clicks = (clicks + 1) % letters.length;
    input.value = input.value +  prevClick;
}
</script>

<input id="put" type="text"></input>

<button onClick="buttonClick('abc');">abc</button>
<button onClick="buttonClick('defg');">defg</button>