纯js实现的软键盘
(function(jquery){
//definedvariable
varcurrentobj,
_getdata=function(opts,callback){
jquery.ajax({
type:"post",
dataType:"text",
url:opts.requestdataurl,
cache:false,
data:{sfbcode:jquery("."+opts.names._codetxt).val()},
success:callback
});
},
//whencodetextboxvaluechanged,triggerthisevent
_codechangeevent=function(opts){
//ifcodetextonchangetrigger
opts.onkeydown(jquery("."+opts.names._codetxt).val());
//------------------import---------------------------
if(opts.onlykeyboard)
currentobj.val(jquery("."+opts.names._codetxt).val());
else{
jquery("."+opts.names._resultsselect).empty();
//getdatafromserver
_getdata(opts,function(data){
vardata=eval("("+data+")");
jquery(data).each(function(index,element){
if(element.name!=undefined)
jquery("."+opts.names._resultsselect).append("<optionvalue='"+element.name+"'>"+element.name+"</option>");
});
});
}
},
//letterbuttonevent
_letterevent=function(opts){
jquery("."+opts.names._letterbtn).bind("click",
function(){
if(opts.maxlength==null){
jquery("."+opts.names._codetxt).val(jquery("."+opts.names._codetxt).val()+jquery(this).val());
_codechangeevent(opts);
}
elseif(opts.maxlength!=null&&jquery("."+opts.names._codetxt).val().length<opts.maxlength){
jquery("."+opts.names._codetxt).val(jquery("."+opts.names._codetxt).val()+jquery(this).val());
_codechangeevent(opts);
}
});
//clearbuttonbindingevent.
jquery("."+opts.names._clearbtn).bind("click",function(){
jquery("."+opts.names._codetxt).val("");
if(currentobj!=null)currentobj.val("");
});
},
//deletebuttonclicktrigger
_deleteevent=function(opts){
jquery("."+opts.names._delbtn).bind("mousedown",function(){
varval=jquery("."+opts.names._codetxt).val();
if(val.length!=0){
val=val.substring(0,val.length-1);
jquery("."+opts.names._codetxt).val(val);
_codechangeevent(opts);
}
});
},
//querybuttonclick
_queryevent=function(opts){
//_getdata(opts,filldata);
},
//whenclickselectitem
_selectclickevent=function(opts){
jquery("."+opts.names._resultsselect).bind("click",
function(){
if(currentobj!=null)currentobj.val(jquery("."+opts.names._resultsselect).val());
});
},
//addclassattributetoelement
_addclstoele=function(cls,ele){
if(cls!=undefined)
ele.addClass(cls);
},
//createinputcontrolelement
_createinputelement=function(type,cls,val){
varelement=jquery("<inputtype='"+type+"'/>");
_addclstoele(cls,element);
if(val!=undefined)
element.val(val);
returnelement;
},
//createdivelement
_createdivelement=function(cls){
varelement=jquery("<div/>");
_addclstoele(cls,element);
returnelement;
},
//createkeyboardbutton
_createkeyboard=function(container,opts){
vari=0;
//create0-9number
for(i=0;i<10;i++){
container.append(_createinputelement("button",opts.names._letterbtn,i));
}
//createa-zword
for(i=97;i<123;i++){
container.append(_createinputelement("button",opts.names._letterbtn,String.fromCharCode(i)));
}
//createA-Zword
if(!opts.simplekeyboard){
for(i=65;i<92;i++){
container.append(_createinputelement("button",opts.names._letterbtn,String.fromCharCode(i)));
}
}
},
//buttonbindevent
_attachevent=function(opts){
_letterevent(opts);
},
//restorekeyboard
_restorekeyboard=function(opts){
jquery("."+opts.names._codetxt).val("");
jquery("."+opts.names._resultsselect).empty();
},
//togglevisible
_visiblekeyboard=function(v,opts){
if(v){
jquery("."+opts.names._maindiv).css("left",currentobj.offset().left);
jquery("."+opts.names._maindiv).css("top",currentobj.offset().top+20);
jquery("."+opts.names._maindiv).show();
_restorekeyboard(opts);
}
else{
jquery("."+opts.names._maindiv).hide();
_restorekeyboard(opts);
}
},
//Initface
_showkeyboard=function(opts){
//getmaincontent
//varcontent=jquery("."+opts.names._maindiv).hide();
varcontent=_createdivelement(opts.names._maindiv).css("position","absolute").css("z-index","9999").hide();
//createkeyboardleftpanel
varskbleft=_createdivelement(opts.names._leftdiv)
.append(_createinputelement("text",opts.names._codetxt))
skbleft.append(jquery("<select/>").addClass(opts.names._resultsselect).attr("multiple",opts.listmultiple));
//createkeyboardrightpanel
varskbright=_createdivelement(opts.names._rightdiv);
//viewornoview
skbleft=jquery(skbleft).css("display",opts.onlykeyboard==true?"none":"");
if(opts.onlykeyboard)skbright.css("float","left");
//createkeyboardtoolbarofrightpanel
varskboperation=_createdivelement(opts.names._operationdiv)
.append(_createinputelement("button",opts.names._delbtn,opts.names._delbtnviewname))
.append(_createinputelement("button",opts.names._clearbtn,opts.names._clearbtnviewname))
.append(_createinputelement("button",opts.names._querybtn,opts.names._querybtnviewname))
.append(_createinputelement("button",opts.names._closebtn,opts.names._closebtnviewname).bind("click",
function(){
_visiblekeyboard(false,opts);
}));
//createkeyboard
varskbkeyboard=_createdivelement(opts.names._keyboarddiv);
_createkeyboard(skbkeyboard,opts);
//attatchtoobartorightpanel
skbright.append(skboperation)
.append(skbkeyboard);
//attatchsoftkeyboardtoHTML
content.append(skbleft);
content.append(skbright);
jquery("body").append(content);
//bindingevent
_attachevent(opts);
_selectclickevent(opts);
_deleteevent(opts);
};
//startpulgin
jquery.fn.softkeyboard=function(options){
//mergeparameterstoopts
varopts=jquery.extend({},jquery.fn.softkeyboard.defaults,options);
//InitkeyboardtoHTMLpage
_showkeyboard(opts);
//bindeventtocurrentelement
this.each(function(){
jquery(this).bind("click",function(){
currentobj=jquery(this);//getcurrentclickobject.--new
_visiblekeyboard(true,opts);
});
});
};
//defaultparameters
jquery.fn.softkeyboard.defaults={
names:{
_delbtn:"skbdel",
_clearbtn:"skbclear",
_querybtn:"skbquery",
_closebtn:"skbclose",
_letterbtn:"skbbtn",
_maindiv:"skbsoftkeyboard",
_leftdiv:"skbleft",
_rightdiv:"skbright",
_keyboarddiv:"skbkeyboard",
_operationdiv:"skboperation",
_codetxt:"skbcode",
_resultsselect:"skbresults",
_postparamcode:"sfbcode",
_clearbtnviewname:"clear",
_delbtnviewname:"delete",
_querybtnviewname:"query",
_closebtnviewname:"close"
},
listmultiple:true,//keyboardresultslistismultiple?tureismultiple,falseislist
simplekeyboard:true,//simplekeyboarddontcreateA-zletteronlycreate0-9,a-z
animation:false,//Animationeffectsforvisiblekeyboardpanel
onlykeyboard:false,
maxlength:null,//keyboardtextboxallowedmaximumlength
requestdataurl:null,
oncompleted:function(data){},//Whencompletedsoftkeyboardoperationtriggertheevents
onkeydown:function(data){}//whenkeydown(textboxchange)triggertheevents
};
})(jQuery);
请大家帮忙完善，现在仅仅是实现功能，布局什么的还没有弄好，所以请看到本文且有兴趣朋友帮忙完善，如有发现任何错误和不合理的地方请您反馈给我。分享快乐，快乐分享！（加载之前请先加载jquery）