简单的拼音输入弹出层

wallimn

浏览: 5160583 次
性别:
来自: 北京

最近访客更多访客>>

java-007

xckouy

lengyun3566

zxjun8771

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVA、WEB开发

IE HTML XHTML

效果如下：

代码比较简单，不过兼容IE及FF，没有考虑过多的东西，需要的可以自已加一下：

<!--
by wallimn 2009-11-05
http://wallimn.iteye.com
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function openNewDiv(_id,xpos,ypos) {
  var m = _id+"_mask";
  if (document.getElementById(_id)) document.removeChild(document.getElementById(_id));
  //if (document.getElementById(m)) document.removeChild(document.getElementById(m));
  // 新激活图层
  var newDiv = document.createElement("div");
  newDiv.id = _id;
  newDiv.style.position = "absolute";
  newDiv.style.zIndex = "9999";
  newDiv.style.width = "230px";
  newDiv.style.height = "80px";
  newDiv.style.top = (ypos?ypos:"100")+"px";
  newDiv.style.left = (xpos?xpos:(parseInt(document.body.scrollWidth) - 300) / 2) + "px";
  newDiv.style.background = "#EFEFEF";
  newDiv.style.border = "1px solid #860001";
  newDiv.style.padding = "5px";
  document.body.appendChild(newDiv);
  /*
  // mask图层
  var newMask = document.createElement("div");
  newMask.id = m;
  newMask.style.position = "absolute";
  newMask.style.zIndex = "1";
  newMask.style.width = document.body.scrollWidth + "px";
  newMask.style.height = document.body.scrollHeight + "px";//scrollHeightclientWidth
  newMask.style.top = "0px";
  newMask.style.left = "0px";
  newMask.style.background = "#000";
  newMask.style.filter = "alpha(opacity=20)";
  newMask.style.opacity = "0.20";
  newMask.style.display='none';
  newMask.onclick=function(){
    document.body.removeChild(docEle(_id));
   	document.body.removeChild(docEle(_id+"_mask"));
   	return false;
  }
  document.body.appendChild(newMask); 
  newMask.style.display='block';
  */
  return newDiv;
}
function closeSoftKeyBoard(_id){
   document.body.removeChild(document.getElementById(_id));
   //document.body.removeChild(document.getElementById(_id+"_mask"));
   return true;
}
function _setTargetValue(btn,targetId){
	//alert(btn.innerText+';'+btn.innerHTML);
	document.getElementById(targetId).value+=btn.innerHTML;
}
function _delTargetValue(targetId){
	var v = document.getElementById(targetId).value;
	if(!v)return;
	document.getElementById(targetId).value = v.substr(0,v.length-1);
}
function getSoftKeyBoardHtml(divId,targetId){
	var a = "a".charCodeAt(0);
	var html = "";
	for (var i=0; i<26; i++){
		html += '<a class="a_a" href="javascript:void(0);" onfocus="this.blur();" onclick="_setTargetValue(this,\''+targetId+'\')">'+String.fromCharCode(a+i)+'</a>';
	}
	html += '<div style="clear:both;"></div><a class="a_b" href="javascript:void(0);" onfocus="this.blur();" onclick="closeSoftKeyBoard(\''+divId+'\')">关闭</a>';
	html += '<a class="a_b" href="javascript:void(0);" onfocus="this.blur();" onclick="_delTargetValue(\''+targetId+'\')"/>退格</a>';
	html += '<a class="a_b" href="javascript:void(0);" onfocus="this.blur();" onclick="document.getElementById(\''+targetId+'\').value=\'\'"/>清除</a>';
	return html;
}
function popSoftKeyBoard(divId,targetId,evt){
	var evt = window.event?window.event:evt;
	var div = openNewDiv(divId,evt.clientX-5,evt.clientY+5);
	div.innerHTML = getSoftKeyBoardHtml(divId,targetId);
}
</script>
<style type="text/css">
.a_a,.a_b{
	width:18px;
	border:1px solid #9BD3F8;
	background-color:#fff;
	text-decoration:none;
	color:#3384C5;
	text-align:center;
	margin:1px;
	font-family:"Times New Roman";
	font-size:12px;
	vertical-align:middle;
	display:block;
	float:left;
}
.a_b{
	border-color:red;
	width:38px;
	float:right;
}
.a_a:hover,.a_b:hover{
	background-color:#E5F3FE;
	color:red;
}
</style>
</head>

<body>
<input type="text" id="pym"/><input type="button" value='S' onclick="popSoftKeyBoard('pymdiv','pym',event);"/>
</body>
</html>

查看图片附件

0
顶

0
踩

分享到：

制作高质量GIF图 | Javascript的Event对象详解

2009-11-08 23:13
浏览 1849
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

简单的拼音输入弹出层

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

简单的拼音输入弹出层

评论

发表评论

相关推荐

gradle编译错误：Could not find method compile() for arguments

netty心跳检查之UDP篇

解决tomcat部署两个SpringBoot应用提示InstanceAlreadyExistsException

Eclipse配置MyBatis代码自动化功能

vue.js中使用qrcode生成二维码

MySQL插入数据报错： Incorrect string value: '\xFD\xDE'

vue自定义组件并双向绑定属性

vue-router简单示例

“联通充值系统繁忙”轻松应对

electron.js数据库应用---导航菜单(element-ui+mysql)

electron.js数据库应用---入门(mysql+element-ui)

SpringMVC 在controller层中注入成员变量request，是否线程安全

VueJS 组件参数名命名与组件属性转化

vue-resource拦截器实现token发送及检验自动化

element-ui试用手记

iviewui中表格控件中render的使用示例

Tomcat错误“Alias name tomcat does not identify a key entry”解决

阿里云免费证书“fileauth.txt内容配置错误”解决

springboot2.0跨域配置

微信小程序使用code换openid的方法（JAVA、SpringBoot）

最近访客更多访客>>