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

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

我明白了，你想做手机键盘。 我不确定你的问题到底是什么，所以我在这里写了完整的例子 http://jsfiddle.net/daybda4h/5/

在细菌方面，如果点击进入另一次点击后的200ms内，我用计时器写了点击事件监听器。

    clicks++;
    if(timer) {
         clearTimeout(timer);   
    }
    timer = setTimeout(function () {
        timer = null;
        updateInput(clicks, evt.target);
        clicks = 0;
    }, timeout);

然后，当没有更多点击时，我会获取最终点击次数，获取一个按钮的数据属性，该按钮说明它控制的字母数，并根据点击次数获取字母数。

要为输入添加值，您只需获取输入值并添加相同的值+一些自定义字符串。

function updateInput(cl, btn) {
    var input = document.getElementById("test");
    var letters = btn.getAttribute("data-letters").split("");

    input.value = input.value + letters[cl-1];
}

希望这可以解决您的问题：）

Answer 2

我尝试过不使用内置定时器功能，并手动检查。

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>