我的虚拟键盘中的删除功能在javascript中不起作用

Question

i will make virtual keyboard on my site. but when i inserted delete function for my keyboard, it's not working. What should I do to solve the problem?

Here's my code

HTML Code

<input type="text" maxlength="12" min="10" name="msidn" id="jkeyboard" min="1" style="font-weight: bold; width:500px; height: 70px; border-color:#1ba1e2; color: #1ba1e2; font-size: 30px; text-align: center; line-height: 75px;" required><div id="content">
<button class="button delete lastitem primary"><span style="font-size: 45px; color:#00aeef;"><b>Delete</b></span></button><div class="jkeyboard-jk">    
<button type="button"><span style="font-size: 45px; color:#00aeef;"><b>1</b></span></button>
<button type="button"><span style="font-size: 45px; color:#00aeef;"><b>2</b></span></button>
<button type="button"><span style="font-size: 45px; color:#00aeef;"><b>3</b></span></button>
<button type="button"><span style="font-size: 45px; color:#00aeef;"><b>4</b></span></button>
<button type="button"><span style="font-size: 45px; color:#00aeef;"><b>5</b></span></button>
<button type="button"><span style="font-size: 45px; color:#00aeef;"><b>6</b></span></button>
<button type="button"><span style="font-size: 45px; color:#00aeef;"><b>7</b></span></button>
<button type="button"><span style="font-size: 45px; color:#00aeef;"><b>8</b></span></button>
<button type="button"><span style="font-size: 45px; color:#00aeef;"><b>9</b></span></button>
<button type="button"><span style="font-size: 45px; color:#00aeef;"><b>0</b></span></button>
</div>
</div>

JS Code:

$(document).ready(function () {

    $('#jkeyboard').focus(function() {

        var keys = [['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '='],
                    ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']'],
                    ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', "'",'#'],
                    ['z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/']];

        var $keyboard = $('<div/>').addClass('jkeyboard-jk');
        var buttons = [];

        for(var i = 0; i < keys.length; i++){
            var $wrap = $('<div/>');

            for(var k = 0; k < keys[i].length; k++){
                var button = $('<button/>').text(keys[i][k]);
                $wrap.append(button);
            }
            buttons.push($wrap);
        }

        $keyboard.append(buttons);

        if(!$('.jkeyboard-jk').is('*')){
            $('body').append($keyboard);
        }

    });

    // button click functions


    function insertAtCaret(areaId,text) {
    debugger;
        var txtarea = document.getElementById(areaId);
        var scrollPos = txtarea.scrollTop;
        var strPos = 0;
        var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
            "ff" : (document.selection ? "ie" : false ) );
        if (br == "ie") { 
            txtarea.focus();
            var range = document.selection.createRange();
            range.moveStart ('character', -txtarea.value.length);
            strPos = range.text.length;
        }
        else if (br == "ff") strPos = txtarea.selectionStart;

        var front = (txtarea.value).substring(0,strPos);  
        var back = (txtarea.value).substring(strPos,txtarea.value.length); 
        txtarea.value=front+text+back;
        strPos = strPos + text.length;
        if (br == "ie") { 
            txtarea.focus();
            var range = document.selection.createRange();
            range.moveStart ('character', -txtarea.value.length);
            range.moveStart ('character', strPos);
            range.moveEnd ('character', 0);
            range.select();
        }
        else if (br == "ff") {
            txtarea.selectionStart = strPos;
            txtarea.selectionEnd = strPos;
            txtarea.focus();
        }
        txtarea.scrollTop = scrollPos;
    }

    $(document).on('click', '.jkeyboard-jk button', function(e){
        e.preventDefault();
        var $content = $('#content');
        var key = $(this).text();

        insertAtCaret('jkeyboard', key);
        if ($this.hasClass('delete')) {
            var html = $content.html();

            $content.html(html.substr(0, html.length - 1));
            return false;
        }

    });


    /*$('.jkeyboard').blur(function(){
        $('.jkeyboard-jk').remove();
    });*/

});

and here's jquery lib which i used: /jquery/1.10.2/jquery.min.js

My JSFIDDLE: DEMO

Answer 1

The selector $(".jkeyboard-jk button") refers to all buttons inside .jkeyboard-jk .
The delete button doesn't apply to this criteria.
Add this to your code:

 $(document).on('click', '.delete', function(e){

            var $content = $('#jkeyboard');
            var html = $content.val();

            $content.val(html.substr(0, html.length - 1));
            return false;


    });