Eightleven Eightleven - 5 months ago 10
Ajax Question

delete function in my virtual keyboard didn't work in javascript

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

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;


    });
Comments