Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Js之软键盘实现(js源码)_javascript技巧

Js之软键盘实现(js源码)_javascript技巧

WBOY
Freigeben： 2016-05-16 19:20:01
Original
1147 Leute haben es durchsucht

鉴于安全性的考虑，不少网站在登录输入密码时都采用了软键盘，避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求，就分享给大家了，贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大，只需要数字小键盘的朋友，可参考代码精简。
下载大键盘: http://www.cnblogs.com/Files/sccxszy/softKey.rar
小键盘：http://www.cnblogs.com/Files/sccxszy/smallSoftkey.rar
3.jpg
小键盘:
4.jpg

效果还原:Default.aspx,softkeyboard.js,softkey.css三个文件
js代码:
softkeyboard.js 

复制代码 代码如下:

window.onload= 
function() 
{ 
password=null; 
initCalc(); 
} 
var password; 
var CapsLockValue=; 
var checkSoftKey; 
function setVariables() { 
tablewidth=; 
tableheight=; 
if (navigator.appName == "Netscape") { 
horz=".left"; 
vert=".top"; 
docStyle="document."; 
styleDoc=""; 
innerW="window.innerWidth"; 
innerH="window.innerHeight"; 
offsetX="window.pageXOffset"; 
offsetY="window.pageYOffset"; 
} 
else { 
horz=".pixelLeft"; 
vert=".pixelTop"; 
doc; 
styleDoc=".style"; 
innerW="document.body.clientWidth"; 
innerH="document.body.clientHeight"; 
offsetX="document.body.scrollLeft"; 
offsetY="document.body.scrollTop"; 
} 
} 
function checkLocation() { 
if (checkSoftKey) { 
objectXY="softkeyboard"; 
var availableX=eval(innerW); 
var availableY=eval(innerH); 
var currentX=eval(offsetX); 
var currentY=eval(offsetY); 
x=availableX-tablewidth+currentX; 
y=currentY; 
evalMove(); 
} 
setTimeout("checkLocation()",); 
} 
function evalMove() { 
eval(docStyle + objectXY + styleDoc + vert + "=" + y); 
} 
self.onError=null; 
currentX = currentY =;   
whichIt = null;            
lastScrollX =; lastScrollY =; 
NS = (document.layers) ? :; 
IE = (document.all) ?:; 
function heartBeat() { 
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } 
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } 
if(diffY != lastScrollY) { 
percent = . * (diffY - lastScrollY); 
if(percent >) percent = Math.ceil(percent); 
else percent = Math.floor(percent); 
if(IE) document.all.softkeyboard.style.pixelTop += percent; 
if(NS) document.softkeyboard.top += percent;  
lastScrollY = lastScrollY + percent;} 
if(diffX != lastScrollX) { 
percent = . * (diffX - lastScrollX); 
if(percent >) percent = Math.ceil(percent); 
else percent = Math.floor(percent); 
if(IE) document.all.softkeyboard.style.pixelLeft += percent; 
if(NS) document.softkeyboard.left += percent; 
lastScrollX = lastScrollX + percent;    }        } 
function checkFocus(x,y) {  
stalkerx = document.softkeyboard.pageX; 
stalkery = document.softkeyboard.pageY; 
stalkerwidth = document.softkeyboard.clip.width; 
stalkerheight = document.softkeyboard.clip.height; 
if( (x > stalkerx && x  stalkery && y (stalkery+stalkerheight))) return true; 
else return false;} 
function grabIt(e) { 
checkSoftKey = false; 
if(IE) { 
whichIt = event.srcElement; 
while (whichIt.id!=null&&whichIt.id.indexOf("softkeyboard") == -) { 
whichIt = whichIt.parentElement; 
if (whichIt == null) { return true; } } 
if(whichIt.style!=null){ 
whichIt.style.pixelLeft = whichIt.offsetLeft; 
whichIt.style.pixelTop = whichIt.offsetTop; 
} 
currentX = (event.clientX + document.body.scrollLeft); 
currentY = (event.clientY + document.body.scrollTop);      
} else {  
window.captureEvents(Event.MOUSEMOVE); 
if(checkFocus (e.pageX,e.pageY)) {  
whichIt = document.softkeyboard; 
StalkerTouchedX = e.pageX-document.softkeyboard.pageX; 
StalkerTouchedY = e.pageY-document.softkeyboard.pageY;} } 
return true;    } 
function moveIt(e) { 
if (whichIt == null) { return false; } 
if(IE) { 
if(whichIt.style!=null){ 
newX = (event.clientX + document.body.scrollLeft); 
newY = (event.clientY + document.body.scrollTop); 
distanceX = (newX - currentX);    distanceY = (newY - currentY); 
currentX = newX;    currentY = newY; 
whichIt.style.pixelLeft += distanceX; 
whichIt.style.pixelTop += distanceY; 
if(whichIt.style.pixelTop document.body.scrollTop; 
if(whichIt.style.pixelLeft document.body.scrollLeft; 
if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft -  
whichIt.style.pixelWidth -) whichIt.style.pixelLeft = document.body.offsetWidth -  
whichIt.style.pixelWidth -; 
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop -  
whichIt.style.pixelHeight -) whichIt.style.pixelTop = document.body.offsetHeight +  
document.body.scrollTop - whichIt.style.pixelHeight -; 
event.returnValue = false; 
} 
} else {  
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY); 
if(whichIt.left if(whichIt.top if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-))  
whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-; 
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-))  
whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-; 
return false;} 
return false;    } 
function dropIt() {whichIt = null; 
if(NS) window.releaseEvents (Event.MOUSEMOVE); 
return true;    } 
if(NS) {window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); 
window.onmousedown = grabIt; 
window.onmousemove = moveIt; 
window.onmouseup = dropIt;    } 
if(IE) { 
document.onmousedown = grabIt; 
document.onmousemove = moveIt; 
document.onmouseup = dropIt;    } 
var style="";     
document.write(style);                                                                    

                                             
document.write("
style=\"position:absolute; left:px; top:px; width:px; z-index:;display:none\">id=\"CalcTable\" width=\"\" border=\"\" align=\"center\" cellpadding=\"\" cellspacing=\" 
\" bgcolor=\"\">align=\"center\">
class=\"table_title\"  align=\"right\" valign=\"middle\" bgcolor=\"\" style=\"cursor:  
default;height:\">name=action> 博客园 
  密码输入器 
               &n 
bsp      value=\"使用键盘输入\" bgtype=\"\" onclick=\"password.readOnly=;password.focus 
();closekeyboard();password.value='';\">
\" border=\"\" cellspacing=\"\" cellpadding=\"\">\n  
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  
\n\n\n\n\n\n\n\n\n\n\n\n \n \n\n
   \">   \">  \"> \"> \"> \">  \"> 格\" onclick=\"setpassvalue();\"  onDblClick=\"setpassvalue();\"  
style=\"width:px;height:px\"> \n
name=\"button_number\" value=\" \"> name=\"button_number\" value=\" \"> name=\"button_number\" value=\" \"> name=\"button_number\" value=\" \"> name=\"button_number\" value=\" \"> name=\"button_number\" value=\" \"> name=\"button_number\" value=\" \"> name=\"button_number\" value=\" \"> name=\"button_number\" value=\" \"> name=\"button_number\" type=button value=\" \"> \">   \"> 
 value=\" q \">   value=\" e \">   value=\" t \">   value=\" u \">   value=\" o \">    
 \">   \"> onDblClick=\"capsLockText();setCapsLock();\" value=\"切换大/小写\"  
style=\"width:px;\">
 type=button value=\" a \">   type=button value=\" d \">   type=button value=\" g \">   type=button value=\" j \"> \">   name=\"button\" type=button value=\" : \"> value=\" " \">   type=button value=\" ' \"> type=button onclick=\"OverInput();\" value=\"   确定  \"  
style=\"width:px;height:px;\">
 value=\" x \">   value=\" v \">   value=\" n \">   value=\"   \"> type=button value=\" ? \">   type=button value=\" . \"> \">
"); 

function addValue(newValue) 
{ 
if (CapsLockValue==) 
{ 
var str=Calc.password.value; 
if(str.length{ 
Calc.password.value += newValue; 
}             
if(str.length{ 
password.value=Calc.password.value; 
} 
} 
else 
{ 
var str=Calc.password.value; 
if(str.length{ 
//Calc.password.value += newValue.toUpperCase(); 
Calc.password.value += newValue; 
} 
if(str.length{ 
password.value=Calc.password.value; 
} 
} 
} 

function setpassvalue() 
{ 
var longnum=Calc.password.value.length; 
var num 
num=Calc.password.value.substr(,longnum-); 
Calc.password.value=num; 
var str=Calc.password.value; 
password.value=Calc.password.value; 
} 

function OverInput() 
{ 
var str=Calc.password.value; 
password.value=Calc.password.value; 
closekeyboard(); 
Calc.password.value=""; 
password.readOnly=; 
} 

function closekeyboard(theForm) 
{ 
softkeyboard.style.display="none"; 
if(null!=unhideSelect){ 
unhideSelect(); 
} 
} 

function showkeyboard() 
{ 
randomNumberButton(); 
var th = password; 
var ttop  = th.offsetTop; 
var thei  = th.clientHeight; 
var tleft = th.offsetLeft; 
var ttyp  = th.type; 
while (th = th.offsetParent){ttop+=th.offsetTop; tleft+=th.offsetLeft;} 
softkeyboard.style.top  = ttop+thei+; 
softkeyboard.style.left = tleft-; 
softkeyboard.style.display="block"; 
password.readOnly=; 
password.blur(); 
document.all.useKey.focus(); 
if(null!=hideSelect){ 
hideSelect(); 
} 
} 

function setCapsLock() 
{ 
if (CapsLockValue==) 
{ 
CapsLockValue= 
} 
else  
{ 
CapsLockValue= 
} 
} 
function setCalcborder() 
{ 
CalcTable.style.border="px solid #BADF" 
} 
function setHead() 
{ 
CalcTable.cells[].style.backgroundColor="#BADF"     
} 
function setCalcButtonBg() 
{ 
for(var i=;i{ 
if(Calc.elements[i].type=="button"&&Calc.elements[i].bgtype!="") 
{ 
if(Calc.elements[i].bgtype==""){ 
Calc.elements[i].className="btn_num"; 
}else{ 
Calc.elements[i].className="btn_letter"; 
} 
var str=Calc.elements[i].value; 
str=str.trim(); 
if(str.length==) 
{ 
} 
var thisButtonValue=Calc.elements[i].value; 
thisButtonValue=thisButtonValue.trim(); 
if(thisButtonValue.length==) 
{ 
Calc.elements[i].onclick= 
function () 
{ 
var thisButtonValue=this.value; 
thisButtonValue=thisButtonValue.trim(); 
thisButtonValue=jiamiMimaKey(thisButtonValue); 
addValue(thisButtonValue); 
} 
Calc.elements[i].ondblclick= 
function () 
{ 
var thisButtonValue=this.value; 
thisButtonValue=thisButtonValue.trim(); 
thisButtonValue=jiamiMimaKey(thisButtonValue); 
addValue(thisButtonValue); 
} 
} 
} 
} 
} 
function initCalc() 
{ 
setCalcborder(); 
setHead(); 
setCalcButtonBg(); 
} 
String.prototype.trim = function() 
{ 
return this.replace(/(^\s*)|(\s*$)/g, ""); 
} 
var capsLockFlag; 
capsLockFlag=true; 
function capsLockText() 
{ 
if(capsLockFlag) 
{ 
for(var i=;i{ 
var char=Calc.elements[i].value; 
var char=char.trim() 
if(Calc.elements[i].type=="button"&&char>="a"&&char{ 
Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt()-)+" " 
} 
} 
} 
else 
{ 
for(var i=;i{ 
var char=Calc.elements[i].value; 
var char=char.trim() 
if(Calc.elements[i].type=="button"&&char>="A"&&char{ 
Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt()+)+" " 
} 
} 
} 
capsLockFlag=!capsLockFlag; 
} 

function randomNumberButton(){ 
var a = new Array();   
a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=; 
var randomNum; 
var times=; 
for(var i=;irandomNum = parseInt(Math.random()*); 
var tmp=a[]; 
a[]=a[randomNum]; 
a[randomNum]=tmp; 
} 
Calc.button_number.value=" "+a[]+" "; 
Calc.button_number.value=" "+a[]+" "; 
Calc.button_number.value=" "+a[]+" "; 
Calc.button_number.value=" "+a[]+" "; 
Calc.button_number.value=" "+a[]+" "; 
Calc.button_number.value=" "+a[]+" "; 
Calc.button_number.value=" "+a[]+" "; 
Calc.button_number.value=" "+a[]+" "; 
Calc.button_number.value=" "+a[]+" "; 
Calc.button_number.value=" "+a[]+" "; 
} 

function hideSelect(){ 
var i=; 
while(idocument.getElementsByTagName("select")[i].style.visibility = "hidden"; 
i=i+; 
} 
} 

function unhideSelect(){ 
var i=; 
while(idocument.getElementsByTagName("select")[i].style.visibility = "visible"; 
i=i+; 
} 
} 


function  jiamiMimaKey(newValue) { 
    if (typeof(b) == "undefined" || typeof(ifUseYinshe) == "undefined" || ifUseYinshe ==  
) {return newValue;} 
    var everyone = ''; 
    var afterPass = ''; 
    for (var i=;i            everyone = newValue.charAt(i); 
            for (var j =;j                    if (everyone == b[*j]) { 
                            afterPass = afterPass + b[*j+]; 
                            break; 
                    } 
            } 
        } 
        newValue= afterPass; 
        jiami =; 
        return afterPass; 
} 

  Default.aspx: 
Inherits="_Default" 
    ResponseEncoding="GB" %> 

nbsp;html PUBLIC "-//WC//DTD XHTML. Transitional//EN"  
"http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> 
 
 
    软键盘 
     
    <script></script> 
 
 
    
 
        
 
                     onblur="tipLogPwd.className='tip_off'" 
           onclick="password=this;showkeyboard();this.readOnly=;Calc.password.value=''" 
                style="width:px"> 
        
 
    
 
 
 

         softkey.css: 
复制代码 代码如下:

#Page_content {}{ 
    PADDING-RIGHT:px; PADDING-LEFT:px; BACKGROUND: #fff; PADDING-BOTTOM:px;  
MARGIN:px auto; WIDTH:px; PADDING-TOP:px 
} 
#Header {}{ 
    BACKGROUND: url(../images/blue/header_bg.gif) repeat-x left top 
} 
#Page_left {}{ 
    FLOAT: left; MARGIN:pxpxpx; WIDTH:px 
} 
#Page_right {}{ 
    FLOAT: right; MARGIN:pxpx; WIDTH:px 
} 
#Footer {}{ 
    PADDING-RIGHT:px; BORDER-TOP: #eeepx solid; PADDING-LEFT:px; PADDING-BOTTOM:  
px; COLOR: #aaa; PADDING-TOP:px; TEXT-ALIGN: left 
} 
.Area_title {}{ 
    PADDING-RIGHT:px; BORDER-TOP: #cpx solid; MARGIN-TOP:px; PADDING-LEFT:px;  
FONT-WEIGHT: bold; FONT-SIZE:px; PADDING-BOTTOM:px; COLOR: #d; PADDING-TOP:px 
} 
.Area_content {}{ 
    PADDING-RIGHT:px; PADDING-LEFT:px; PADDING-BOTTOM:px; PADDING-TOP:px 
} 
.Area_button {}{ 
    MARGIN-TOP:px; PADDING-LEFT:px 
} 
.Area_button IMG {}{ 
    VERTICAL-ALIGN:px 
} 
.float_left {}{ 
    FLOAT: left 
} 
.float_right {}{ 
    FLOAT: right 
} 
.content_title {}{ 
    PADDING-RIGHT:px; PADDING-LEFT:px; FONT-WEIGHT: bold; PADDING-BOTTOM:px; COLOR:  
#; PADDING-TOP:px 
} 
.relative {}{ 
    PADDING-RIGHT:px; BORDER-TOP: #cpx solid; PADDING-LEFT:px; LIST-STYLE- 
POSITION: inside; BACKGROUND: none transparent scroll repeat%%; LIST-STYLE-IMAGE: url 
(../images/blue/icon_list.gif); PADDING-BOTTOM:px; MARGIN:pxpxpx; PADDING-TOP:px 
} 
.relative LI {}{ 
    PADDING-RIGHT:px; PADDING-LEFT:px; FONT-WEIGHT: normal; PADDING-BOTTOM:px;  
MARGIN:pxpxpx; COLOR: #; PADDING-TOP:px; BORDER-BOTTOM: #dddpx solid 
} 
 {}{ 
    PADDING-RIGHT:px; PADDING-LEFT:px; PADDING-BOTTOM:px; MARGIN:px; PADDING-TOP:  
px 
} 
BODY {}{ 
    BACKGROUND: #eee 
} 
BODY {}{ 
    FONT:px "宋体",Tahoma; COLOR: # 
} 
DIV {}{ 
    FONT:px "宋体",Tahoma; COLOR: # 
} 
TD {}{ 
    FONT:px "宋体",Tahoma; COLOR: # 
} 
SPAN {}{ 
    FONT:px "宋体",Tahoma; COLOR: # 
} 
SELECT {}{ 
    FONT:px "宋体",Tahoma; COLOR: # 
} 
P {}{ 
    FONT:px "宋体",Tahoma; COLOR: # 
} 
IMG {}{ 
    BORDER-TOP-WIDTH:px; BORDER-LEFT-WIDTH:px; BORDER-BOTTOM-WIDTH:px; BORDER- 
RIGHT-WIDTH:px 
} 
A {}{ 
    COLOR: #; TEXT-DECORATION: none 
} 
A:hover {}{ 
    COLOR: #b; TEXT-DECORATION: none 
} 
INPUT {}{ 
    FONT:px "宋体",Tahoma 
} 
INPUT.button {}{ 
    BORDER-TOP-WIDTH:px; PADDING-RIGHT:px; PADDING-LEFT:px; BORDER-LEFT-WIDTH:  
px; BACKGROUND: url(../images/blue/button_bg.gif) #ada repeat-x left top; BORDER- 
BOTTOM-WIDTH:px; PADDING-BOTTOM:px; CURSOR: hand; COLOR: #fff; MARGIN-RIGHT:px;  
PADDING-TOP:px; BORDER-RIGHT-WIDTH:px 
} 
INPUT.button_dis {}{ 
    BORDER-TOP-WIDTH:px; PADDING-RIGHT:px; PADDING-LEFT:px; BORDER-LEFT-WIDTH:  
px; BORDER-BOTTOM-WIDTH:px; PADDING-BOTTOM:px; CURSOR: hand; COLOR: #fff; MARGIN-RIGHT:  
px; PADDING-TOP:px; BORDER-RIGHT-WIDTH:px 
} 
UL {}{ 
    PADDING-LEFT:px; FONT-WEIGHT: bold; LIST-STYLE-POSITION: outside; BACKGROUND: url 
(../images/icon_ul.gif) no-repeat left top; LIST-STYLE-IMAGE: url 
(../images/blue/icon_list.gif); MARGIN:px; COLOR: # 
} 
LI {}{ 
    PADDING-RIGHT:px; PADDING-LEFT:px; FONT-WEIGHT: normal; PADDING-BOTTOM:px;  
MARGIN:pxpxpx; COLOR: #; PADDING-TOP:px 
} 
.clear {}{ 
    CLEAR: both 
} 
.top_margin {}{ 
    MARGIN:pxpxpxpx 
} 
.text_bold {}{ 
    FONT-WEIGHT: bold 
} 
.step_on .text_content {}{ 
    COLOR: # 
} 
.text_content {}{ 
    PADDING-RIGHT:px; PADDING-LEFT:px; PADDING-BOTTOM:px; PADDING-TOP:px; BORDER 
-BOTTOM: #eeepx solid 
} 
.text_red {}{ 
    COLOR: #b 
} 
A.text_red:hover {}{ 
    COLOR: # 
} 
.req {}{ 
    FONT-WEIGHT: bold; COLOR: #b 
} 
.info {}{ 
    COLOR: # 
} 
.dark {}{ 
    COLOR: # 
} 
.text_big {}{ 
    FONT-SIZE:px; COLOR: #; LINE-HEIGHT:px 
} 
.big {}{ 
    FONT-SIZE:px 
} 
.reg_flow {}{ 
    PADDING-RIGHT:px; PADDING-LEFT:px; FONT-WEIGHT: normal; FONT-SIZE:px;  
BACKGROUND: #fff; PADDING-BOTTOM:px; MARGIN:pxpxpx; COLOR: #; PADDING-TOP:  
px 
} 
.reg_title {}{ 
    PADDING-RIGHT:px; PADDING-LEFT:px; FONT-WEIGHT: bold; FONT-SIZE:px;  
BACKGROUND: url(../images/icon_reg.gif) no-repeat left top; PADDING-BOTTOM:px; COLOR:  
#d; PADDING-TOP:px 
} 
.flow_focus {}{ 
    FONT-WEIGHT: bold; COLOR: #b 
} 
.flow_undo {}{ 
    COLOR: # 
} 
.flow_done {}{ 
    COLOR: # 
} 
.image_safe {}{ 
    PADDING-LEFT:px; BACKGROUND: url(../images/icon_safe_big.gif) no-repeat left top 
} 
.text_success {}{ 
    BORDER-RIGHT: #cpx solid; PADDING-RIGHT:px; BORDER-TOP: #cpx solid;  
PADDING-LEFT:px; BACKGROUND: url(../images/blue/icon_success.gif) #ffff no-repeatpx  
%; PADDING-BOTTOM:px; BORDER-LEFT: #cpx solid; PADDING-TOP:px; BORDER-BOTTOM:  
#cpx solid 
} 
.text_notice {}{ 
    BORDER-RIGHT: #cpx solid; PADDING-RIGHT:px; BORDER-TOP: #cpx solid;  
PADDING-LEFT:px; BACKGROUND: url(../images/blue/icon_gantan.gif) #ffff no-repeatpx  
%; PADDING-BOTTOM:px; BORDER-LEFT: #cpx solid; PADDING-TOP:px; BORDER-BOTTOM:  
#cpx solid 
} 
.reg_info {}{ 
    BORDER-RIGHT: #cpx solid; PADDING-RIGHT:px; BORDER-TOP: #cpx solid;  
PADDING-LEFT:px; BACKGROUND: url(../images/blue/icon_info.gif) #ffff no-repeatpx  
%; PADDING-BOTTOM:px; BORDER-LEFT: #cpx solid; PADDING-TOP:px; BORDER-BOTTOM: #c  
px solid 
} 
.step_on .tip_off {}{ 
    BORDER-RIGHT: #deefpx solid; PADDING-RIGHT:px; BORDER-TOP: #deefpx solid;  
PADDING-LEFT:px; BACKGROUND: url(../images/blue/arr_tip_off.gif) #fff no-repeatpxpx;  
PADDING-BOTTOM:px; BORDER-LEFT: #deefpx solid; COLOR: #; PADDING-TOP:px; BORDER- 
BOTTOM: #deefpx solid 
} 
.tip_off {}{ 
    PADDING-RIGHT:px; PADDING-LEFT:px; BACKGROUND: url 
(../images/blue/arr_tip_off.gif) #fff no-repeatpxpx; PADDING-BOTTOM:px; COLOR: #;  
PADDING-TOP:px 
} 
.tip_on {}{ 
    BORDER-RIGHT: #px solid; PADDING-RIGHT:px; BORDER-TOP: #px solid;  
PADDING-LEFT:px; BACKGROUND: url(../images/blue/arr_tip_on.gif) #efde no-repeatpx  
px; PADDING-BOTTOM:px; BORDER-LEFT: #px solid; COLOR: #; PADDING-TOP:px;  
BORDER-BOTTOM: #px solid 
} 
.tip_on IMG {}{ 
    VERTICAL-ALIGN: top 
} 
.tip_off IMG {}{ 
    VERTICAL-ALIGN: top 
} 
.step_on {}{ 
    PADDING-RIGHT:px; PADDING-LEFT:px; BACKGROUND: #fff; PADDING-BOTTOM:px;  
PADDING-TOP:px 
} 
.step_off {}{ 
    PADDING-RIGHT:px; PADDING-LEFT:px; BACKGROUND: #fff; PADDING-BOTTOM:px;  
PADDING-TOP:px 
} 
.step_on .content_title {}{ 
    COLOR: # 
} 
P {}{ 
    MARGIN:pxpx; TEXT-INDENT:em 
} 
.btn_letter {}{ 
    BORDER-LEFT-COLOR: #bebd; FILTER: progid:DXImageTransform.Microsoft.Gradient 
(GradientType=,StartColorStr=#ffffff, EndColorStr=#DDDCDC); BORDER-BOTTOM-COLOR: #cb;  
COLOR: #bc; BORDER-TOP-COLOR: #bebd; BORDER-RIGHT-COLOR: #cb 
} 
.btn_num {}{ 
    BORDER-LEFT-COLOR: #ebff; FILTER: progid:DXImageTransform.Microsoft.Gradient 
(GradientType=, StartColorStr=#ffffff, EndColorStr=#BD); BORDER-BOTTOM-COLOR: #ebff;  
COLOR: black; BORDER-TOP-COLOR: #ebff; BORDER-RIGHT-COLOR: #ebff 
} 

         想还原事例，又怕麻烦的朋友，也可以留下Email,将发到您邮箱！水平有限，写不出多高深
和理论性较强的文章，只能发些实用的东西给大家.
        Ps:一周一博，工作太忙，时间太少！
小键盘本地下载下载文件 下载此文件 大键盘本地下载下载文件 下载此文件
Verwandte Etiketten：
Js之软键盘实现(js源码)
Quelle：php.cn
Vorheriger Artikel：用JavaScript和注册表脚本实现右键收藏Web页选中文本_javascript技巧 Nächster Artikel：关于图片验证码设计的思考_广告代码
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
3
2334
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
11
2469
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
2088
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1965
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
2041
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage