Question

好的，有人可以帮忙吗？

我有一个字母数组var arr = [a，b，c] 我希望实现像手机打字（旧的）：

如果用户在2秒钟内点击任何地方，jquery会在文本框中输入一个字母a。如果用户在两秒钟内点击两次，jquery会将字母b放入文本框中，如果他在两秒钟内点击三次，则也是蚂蚁...

谢谢

这就是我所拥有的：情况下：

                            var myInterval = setInterval(function () {
                                countLetters=0;

                            }, 2000);
                        }


                        var sellectedBoxLetters = $('div.gh_h2.gh_v1.js_item.selected').attr('title'); //this gets array of 3 letters a, b, c
                        if (sellectedBoxLetters != null) 
                            substr = sellectedBoxLetters.split(' '); // this gets letter by letter

                            $("input#search").val($('input#search').val() + substr[countLetters]); //this puts the value into the box but without hops ..all letters
                            countLetters++;

Answer 1

http://jsfiddle.net/VseSj/5/

在这里，我感到无聊，无论如何，这是一个开始，它肯定没有完成，但它应该让你到处。

HTML：

<div>
    <textarea id="txt"></textarea>
</div>
<div>
    <table>
        <tr>
            <th colspan="3"><input id="btn1" type="button" value="<="></th>
        </tr>
        <tr>
            <td><input id="btn1" type="button" value=". ! ?" data-value=".!?"></td>
            <td><input id="btn2" type="button" value="a b c" data-value="abc"></td>
            <td><input id="btn3" type="button" value="d e f" data-value="def"></td>
        </tr>
        <tr>
            <td><input id="btn4" type="button" value="g h i" data-value="ghi"></td>
            <td><input id="btn5" type="button" value="j k l" data-value="jkl"></td>
            <td><input id="btn6" type="button" value="m n o" data-value="mno"></td>
        </tr>
        <tr>
            <td><input id="btn7" type="button" value="p q r s" data-value="pqrs"></td>
            <td><input id="btn8" type="button" value="t u v" data-value="tuv"></td>
            <td><input id="btn9" type="button" value="v w x z" data-value="cwxz"></td>
        </tr>
        <tr>
            <td><input id="btnstar" type="button" value="*" data-value="*"></td>
            <td><input id="btn0" type="button" value="_" data-value=" "></td>
            <td><input id="btncross" type="button" value="#" data-value="#"></td>
        </tr>
    </table>
</div>

JS：

var keyboard = {
    clickspan: 2000,
    clicked: false,
    clickedId: "",
    clickedCount: 0,
    oldval: "",
    newval: "",
    timeout: null,
    init: function() {
        $("td input").click(function() {

            if (keyboard.clicked && keyboard.clickedId == $(this).attr("id")) {

                keyboard.newval = keyboard.oldval + $(this).data("value").charAt(keyboard.clickedCount);
                keyboard.clickedCount = (keyboard.clickedCount + 1) % $(this).data("value").length;
                clearTimeout(keyboard.timeout);
                keyboard.timeout = setTimeout(function() {
                    keyboard.clicked = false;
                }, keyboard.clickspan);

            } else {
                keyboard.oldval = $("#txt").val();
                keyboard.setClicked($(this).attr("id"));
                keyboard.newval = keyboard.oldval + $(this).data("value").charAt(keyboard.clickedCount);
                keyboard.clickedCount = (keyboard.clickedCount + 1) % $(this).data("value").length;
            }

            $("#txt").val(keyboard.newval);
        });

        $("th input").click(function() {
            keyboard.oldval = $("#txt").val();
            var oldvallength = keyboard.oldval.length;
            $("#txt").val(keyboard.oldval.substring(0, oldvallength - 1));
        });
    },
    setClicked: function(id) {
        keyboard.clicked = true;
        keyboard.clickedId = id;
        keyboard.clickedCount = 0;
        keyboard.timeout = setTimeout(function() {
            keyboard.clicked = false;
        }, keyboard.clickspan);
    }

};

$(document).ready(function() {
    keyboard.init();

});

Jquery键入字母作为移动键盘

1 个答案: