我尝试使用jquery keyboard.js从文本框中获取用户输入。如果省略虚拟键盘代码,它的工作正常。
网址:https://github.com/Mottie/Keyboard/wiki
这是我的文本框和按钮:
<input type="text" name="pnr" id="txtpnr" required class="form-control" placeholder="Enter PNR Number" maxlength="10">
<button type="button" name="btnCheckpnr" id="btnCheckpnr" class="btn btn-block btn-default">Get current status</button>
我将头文件包含为:
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.keyboard.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
虚拟键盘的JavaScript代码:
$('#txtpnr').keyboard({
layout: 'custom',
customLayout: {
'default' : [
'8 9 {a} {c}',
'4 5 6 7',
'0 1 2 3',
'{bksp}'
]
},
maxLength : 10,
restrictInput : true,
useCombos : false,
acceptValid: true,
validate: function(keyboard, value, isClosing){
return value.length === 10;
}
}).addTyping();
我用于按钮的代码:
$('#btnCheckpnr').on('click',function(){
$('#flag-0').hide();
$('#flag-1').hide();
$('#flag-2').hide();
if($('#txtpnr').val() == '' || $('#txtpnr').val().length < 10){
$(".help-block").show().delay(5000).fadeOut();
$('#txtpnr').focus();
}else{
$('#big-loading').show();
$("*[name^='flag']").hide();
$('#pnr-info').hide();
$.ajax({
'method':'POST',
'url':'backEnd/jsonProcess.php',
'data':'pnrno='+$('#txtpnr').val()+'&RequestType=checkpnr',
success: function(getPnrStatus){
$('#big-loading').hide();
if(getPnrStatus == '0'){
$('#flag-0').show();
}
else if(getPnrStatus == '1'){
$('#flag-1').show();
}
else if(getPnrStatus == '2'){
$('#flag-2').show();
}
else if(getPnrStatus == ''){
$('#flag-2').show();
}else{
$('#pnr-info').show();
var pnrinfo = getPnrStatus.split('#');
$('.pnr').empty().html(pnrinfo[0]);
$('.journy').empty().html(pnrinfo[1]);
$('.trainname').empty().html(pnrinfo[2]);
$('.trainno').empty().html(pnrinfo[3]);
$('.class').empty().html(pnrinfo[4]);
$('.brdfrom').empty().html(pnrinfo[5]);
$('.bkpoint').empty().html(pnrinfo[6]);
$('.brdto').empty().html(pnrinfo[7]);
$('.chartinfo').empty().html(pnrinfo[8]);
$('#passenger-info tbody').empty().html(pnrinfo[9]);
}
}
});
}
});
通过虚拟键盘添加值后,按钮单击事件不起作用。 我该如何解决这个问题?我使用了bootstrap 3 css框架。
答案 0 :(得分:3)
<script src="js/jquery.keyboard.extension-typing.js"></script>
缺少此脚本。
addTyping()是其中的一部分。