js软键盘

shdxiang 2010-01-27 08:35:52

谁有兼容IE和firefox的密码软键盘啊给个啊
邮箱error.cool@163.com

...全文

415 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

jspc 2011-05-02

打赏
举报

网上的人才到处都是啊

garcon1986 2010-01-30

打赏
举报

学习

xuyiazl 2010-01-29

打赏
举报



.kbdiv {

	position: absolute;

	z-index: 100;

	background-color: #FFFFFF;

	border: 1px solid #CCCCCC;

	padding: 1p;

	cursor: pointer;

}



.kbtable {

	border: 1px solid #CCCCCC;

	border-collapse:collsapse;

	table-layout:fixed;

}



.kbtable td {

	padding: 0px;

}



.kbkey {

	height: 20px;

	width: 20px;

	text-align: center;

}



.kbcolspan {

	text-align: center;

	font-size: 12px;

}



.kbmouseover {

	font-weight: bold;

	color: red;

}

xuyiazl 2010-01-29

打赏
举报



/*

 * JS Keyboard - 随机生成的软键盘.

*/



function RandomSort(a,b){

	return Math.random() - 0.5;

}



function getRandomNum()

{

	var numArray=new Array();

	var i;

	for(i=0;i<10;i++)

	  numArray[i]=i;//生成一个数组

	numArray.sort(RandomSort);

	return numArray;

}



function getRandomChar()

{

	var charArray=new Array();

	var i,j;

	for(i=0,j=97;j<123;i++,j++)

	  charArray[i]=j;//生成字母表

	charArray.sort(RandomSort);

	//对字母进行翻译

	for(i=0;i<charArray.length;i++)

		charArray[i] = String.fromCharCode(charArray[i]);

	return charArray;

}



function showKeyboard(inputId)

{

	var kb = $('#yh_KeyBoard');

	if (kb.length!=0)

	{

		kb.remove();

		return false;

	}

	

	kb = $('<div id="yh_KeyBoard" class="kbdiv"></div>');

	var i=0;

	var keyboard = '<table class="kbtable"><tr>';

	numArray = getRandomNum();

	charArray = getRandomChar();

	for(i=0;i<10;i++)

	{

		keyboard += '<td class="kbkey">'+numArray[i]+'</td>';

	}

	keyboard += "</tr><tr>";

	for(i=0;i<26;i++)

	{

		if (i%10==0 && i>0)

			keyboard += "</tr><tr>";

		keyboard += '<td class="kbkey">'+charArray[i]+'</td>';

	}

	keyboard += '<td id="kbcaps" colspan="2" class="kbcolspan">大小写</td>';

	keyboard += '<td id="kbclose" colspan="2" class="kbcolspan">关　闭</td>';

	keyboard += '</tr></table>';

	kb.html(keyboard);

	kb.appendTo('body');



	$("td",kb).mouseover(function() {

		this.className += " kbmouseover";

	}).mouseout(function() {

		this.className = this.className.replace(" kbmouseover","");

	}).click(function() {

		if(this.id == "kbclose") {

			kb.remove();

			return false;

		}

		else if(this.id == "kbcaps") {

			$.each($(".kbkey",kb),function(i,o) {

				var num = o.innerHTML.charCodeAt(0);

				if(num>96 && num<123)

					o.innerHTML = o.innerHTML.toUpperCase();

				else if(num>64 && num<91)

					o.innerHTML = o.innerHTML.toLowerCase();

			});



			return false;

		}



		$("#"+inputId).attr("value",$("#"+inputId).val()+this.innerHTML);

	});

	

	var offset = $("#"+inputId).offset();

	var left = offset.left;

	var height = $("#"+inputId).height();

	var top = offset.top+height+8;

	kb.css({"left": left+"px", "top": top+"px"});



	return false;

}



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>基于jquery的随机软键盘示例</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<link rel="stylesheet" type="text/css" href="keyboard.css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="keyboard.js"></script>

</head>

<body>

<h3>基于jquery的随机软键盘示例</h3>

<form method="post" action="">

	<p><input type="text" name="t1"></p>

	<p><input id="password"> <a href="javascript:void(0)" onclick="showKeyboard('password')">软键盘</a></p>

	<p><input type="text" name="t2"></p>

	<p><input type="submit" name="t1"></p>

</form>

</body>

</html>