javascript - 多输入框如何使用虚拟键盘？

Question

大家早上好

我有一个问题，它不工作。只需检查我的代码中有什么问题。

请给我一些如何修复它的建议。我用什么方式使用我的代码，所以我会找到结果。

请建议一种尽快做出正确决定的方法。当我的鼠标单击输入框时，如何传递 id。我的代码正确吗？我在某处做错了。

其他页面的一些代码

var $write = (function(){
         var write = write();
         write.init("keyboard");
         //first input focus
         var $firstInput = $(':input').first().focus();
         write.currentElement = $firstInput;
         write.currentElementCursorPosition = $('#'+id);
     });

$(function(){
    $(':input').on('click', function () {
        var id = this.id;
        var $write = id, 
        shift = false,
        capslock = false;       

    $('#keyboard li').click(function(){
        var $this = $(this),
            character = $this.html(); // If it's a lowercase letter, nothing happens to this variable

        // Shift keys
        if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
            $('.letter').toggleClass('uppercase');
            $('.symbol span').toggle();

            shift = (shift === true) ? false : true;
            capslock = false;
            return false;
        }

        // Caps lock
        if ($this.hasClass('capslock')) {
            $('.letter').toggleClass('uppercase');
            capslock = true;
            return false;
        }

        // Delete
            if ($this.hasClass('delete')) {
                var html = $write.html(),
                txt = html.substr(0, html.length - 1);
              $write.html(txt);
              $write.autocomplete("search", txt);
              return false;
            }
            // Delete

        // Special characters
        if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
        if ($this.hasClass('space')) character = ' ';
        if ($this.hasClass('tab')) character = "\t";
        if ($this.hasClass('return')) character = "\n";

        // Uppercase letter
        if ($this.hasClass('uppercase')) character = character.toUpperCase();

        // Remove shift once a key is clicked.
        if (shift === true) {
            $('.symbol span').toggle();
            if (capslock === false) $('.letter').toggleClass('uppercase');

            shift = false;
        }
        //console.log("DO IT ", character);
        // Add the character
        switch ($write) { 
                case ('#itemNo_1'): 
                    $write.val($write.val() + character);       
                    $write.html(txt);
                    $write.autocomplete("search", txt);
                    break;
                case ('#itemNo_2'):  
                    alert('You are item No. 2');
                    break;
                case ('#itemNo_3'): 
                    alert('You are item No. 3');    
                    break;
                //default:
                    //alert($write);
            }
    }); 
    }); 
});

Answer 1

使用下面的代码

HTML

<div id="wrap">
    <h2>Donation Form</h2>
    <h3>Demo thanks to Casey Zumwalt of <a href="http://simplefocus.com/">SimpleFocus</a></h3>
    <br>
    <form action="#">
        <div class="fieldset-standard">
            <fieldset>

                <div class="fieldset-grouping">
                    <label for="first-name">First Name</label>
                    <input type="text" class="keyboard-normal" id="first-name" name="first-name" value="">
                </div>

                <div class="fieldset-grouping">
                    <label for="last-name">Last Name</label>
                    <input type="text" class="keyboard-normal" id="last-name" name="last-name" value="">
                </div>

                <div class="fieldset-grouping">
                    <label for="address">Address</label>
                    <input type="text" class="keyboard-normal" id="address" name="address" value="">
                </div>

                <div class="fieldset-grouping">
                    <label for="city">City</label>
                    <input type="text" class="keyboard-normal" id="city" name="city" value="">
                </div>

                <div class="fieldset-grouping">
                    <label for="state">State</label>
                    <input type="text" class="keyboard-states" id="state" name="state" value="" maxlength="2">
                </div>

                <div class="fieldset-grouping">
                    <label for="zip-code">Zip Code</label>
                    <input type="text" class="keyboard-zip" id="zip-code" name="zip-code" value="">
                </div>

                <div class="fieldset-grouping">
                    <label for="phone">Phone Number</label>
                    <input type="text" id="phone" class="keyboard-num keyboard-phone" name="phone" value="">
                </div>

                <div class="fieldset-grouping">
                    <label for="tithe">Tithe <small>(USD)</small></label>
                    <input type="text" id="tithe" class="keyboard-normal" name="tithe" value="">
                </div>

                <div class="fieldset-grouping">
                    <label for="missions">Missions <small>(USD)</small></label>
                    <input type="text" id="missions" class="keyboard-normal" name="missions" value="">
                </div>

                <div class="fieldset-grouping">
                    <label for="building">Building <small>(USD)</small></label>
                    <input type="text" id="building" class="keyboard-normal" name="building" value="">
                </div>

                <div class="submit-grouping">
                    <input type="submit" value="Pay Now">
                </div>

            </fieldset>
        </div>
    </form>
</div>

JavaScript

// Add next/previous buttons
var addNav = function(base) {
    base.$el.addClass('current');
    $("body").css('padding-bottom', '250px'); // keep Donate Now button in view
    var inputs = $('input'),
        len = inputs.length - 1,
        indx = inputs.index(base.$el),
        topPadding = 50; // distance from top where the focused input is placed
    // make sure input is in view
    $(window).scrollTop(inputs.eq(indx).offset().top - topPadding);

    // see if nav is already set up
    if (base.$keyboard.find('.ui-keyboard-nav').length) {
        return;
    }

    // add nav window & buttons
    base.$keyboard.append('<div class="ui-keyboard-nav"><button class="prev ui-state-default ui-corner-all">prev</button><button class="next ui-state-default ui-corner-all">next</button></div>');

    base.$keyboard.find('.next').hover(function() {
        $(this).addClass('ui-state-hover');
    }, function() {
        $(this).removeClass('ui-state-hover');
    }).click(function() {
        var n = indx + 1;
        if (n >= len) {
            return;
        }
        base.close(true); // true = auto accept
        // set focus to next input
        inputs.eq(n).focus();
        // make sure input is in view
        $(window).scrollTop(inputs.eq(n).offset().top - topPadding);
    });

    base.$keyboard.find('.prev').hover(function() {
        $(this).addClass('ui-state-hover');
    }, function() {
        $(this).removeClass('ui-state-hover');
    }).click(function() {
        var n = indx - 1;
        if (n < 0) {
            return;
        }
        base.close(true); // true = auto accept
        // set focus to previous input
        inputs.eq(n).focus();
        // make sure input is in view
        $(window).scrollTop(inputs.eq(n).offset().top - topPadding);
    });

}; // end prev/next button code
// Keyboard Layouts
$('.keyboard-normal').keyboard({
    layout: 'qwerty',
    autoAccept: 'true',
    usePreview: false,
    visible: function(e, keyboard, el) {
        addNav(keyboard);
    },
    beforeClose: function(e, keyboard, el, accepted) {
        $('input.current').removeClass('current');
        $("body").css('padding-bottom', '0px');
    }
});

$('.keyboard-zip').keyboard({
    layout: 'custom',
    autoAccept: 'true',
    maxLength: 5,
    customLayout: {
        'default': [
            '7 8 9',
            '4 5 6',
            '1 2 3',
            '0 {bksp}',
            '{accept}'
            ]
    },
    usePreview: false,
    visible: function(e, keyboard, el) {
        addNav(keyboard);
    },
    beforeClose: function(e, keyboard, el, accepted) {
        $('input.current').removeClass('current');
        $("body").css('padding-bottom', '0px');
    }
});

$('.keyboard-num').keyboard({
    layout: 'custom',
    autoAccept: 'true',
    customLayout: {
        'default': [
            '7 8 9',
            '4 5 6',
            '1 2 3',
            '0 {bksp}',
            '{accept}'
            ]
    },
    usePreview: false,
    visible: function(e, keyboard, el) {
        addNav(keyboard);
    },
    beforeClose: function(e, keyboard, el, accepted) {
        $('input.current').removeClass('current');
        $("body").css('padding-bottom', '0px');
    }
});

$('.keyboard-states').keyboard({
    layout: 'custom',
    customLayout: {
        'default': [
            'AL AK AZ AR CA CO CT DE FL GA',
            'HI ID IL IN IA KS KY LA ME MD',
            'MA MI MN MS MO MT NE NV NH NJ',
            'NM NY NC ND OH OK OR PA RI SC',
            'SD TN TX UT VT VA WA WV WI WY',
            '{accept}{clear}'
            ]
    },
    usePreview: false,
    visible: function(e, keyboard, el) {
        addNav(keyboard);
    },
    // prevent entering more than one state
    change: function(e, keyboard, el) {
        var v = keyboard.$el.val();
        if (v.length > 2) {
            keyboard.$el.val(v.slice(-2));
        }
    },
    beforeClose: function(e, keyboard, el, accepted) {
        $('input.current').removeClass('current');
        $("button.ui-keyboard-widekey").removeClass('state-button');
        $("body").css('padding-bottom', '0px');
    }
});

你可以试试http://jsfiddle.net/Mottie/Em8sG/624/