我的虚拟键盘中的删除功能在javascript中不起作用
delete function in my virtual keyboard didn't work in javascript
我将在我的网站上制作虚拟键盘。但当我为键盘插入删除功能时,它不起作用。我该怎么做才能解决这个问题?
这是我的代码
HTML代码
<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代码:
$(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();
});*/
});
这里是我使用的jquery库:/jquery/1.10.2/jquery.min.js
My JSFIDDLE: DEMO
选择器$(".jkeyboard-jk button")
是指.jkeyboard-jk
内部的所有按钮。
删除按钮不适用于此条件。
将此添加到您的代码中:
$(document).on('click', '.delete', function(e){
var $content = $('#jkeyboard');
var html = $content.val();
$content.val(html.substr(0, html.length - 1));
return false;
});
相关文章:
- 幻灯片滚动javascript不起作用
- 当我在浏览器中打开HTML文件时,javascript不起作用
- 来自MDN的循环示例的JavaScript不起作用
- 在IE中切换javascript不起作用的复选框
- 在SVG中创建带有外来对象的文本区域的Javascript不起作用
- 寻呼<李>javascript不起作用
- 想制作一个基于URL的音频播放器,但Javascript不起作用
- 从Android设备浏览时Javascript不起作用
- 在 Javascript 不起作用的情况下为数字添加逗号
- 获取PHP变量的JavaScript不起作用
- 有些JavaScript不起作用
- 保存HTML文件后,Javascript不起作用
- onClick javascript不起作用
- 在Wicket ModalWindow中使用Panel时,HTML中的Javascript不起作用
- Jquery顶部的两行Javascript不起作用
- 当我通过Node服务器提供HTML时,为什么我的页面Javascript不起作用
- Javascript不起作用,但当放置断点并从chrome调试器工具中单击文件时,它可以正常工作
- 为不同的屏幕分辨率加载css样式的Javascript不起作用
- 在IE9中javascript不起作用,但在打开控制台后它就起作用了
- 为什么Javascript不起作用