`

简单的拼音输入弹出层

IEHTMLXHTML 
阅读更多
效果如下：




代码比较简单，不过兼容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>
  • 大小: 12.1 KB
0
顶
0
踩
分享到：
| Javascript的Event对象详解
评论
发表评论

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

相关推荐

    js支持拼音分类的多城市选择弹出层

    JavaScript的事件监听器允许我们为这些事件添加响应，例如点击按钮打开弹出层，或在输入框中输入拼音时实时过滤城市列表。 4. **字符串处理与正则表达式**：拼音分类功能需要对城市名进行处理，这涉及到字符串的...

    携程网城市选择,javascript城市选择特效

    这个特效通常包含拼音检索和弹出层等交互元素，旨在提高用户体验，使查找和选择目的地的过程更为高效。接下来，我们将详细讨论这个功能背后涉及的JavaScript技术及其实现方式。 1. **JavaScript基础** JavaScript...

    好用的js 软键盘

    5. dhlayer.js：可能是一个弹出层或者浮动层的库，用于控制软键盘的显示和隐藏，以及与其他元素的交互。 6. keyboard.png：这是一个图片文件，很可能包含软键盘的图形界面，被用来渲染虚拟键盘的按键。 综合以上...

    div,css,js 实现手动输入法

    例如，可以使用CSS来定义输入框的边框、背景色、字体大小，候选词列表的显示方式（如悬浮或弹出），以及按钮的样式等。此外，CSS还可以通过媒体查询实现响应式设计，确保输入法在不同设备上都能良好显示。 3. ...

    Extjs-多功能下拉树列表

    1. **minListWidth**：定义弹出层的最小宽度，需大于组合框本身的宽度。当与`listWidth`同时使用时，此配置无效。 2. **listWidth**：设定弹出层的固定宽度，使其不再根据树的宽度动态调整。 3. **hiddenName**：...

    ASP.NET WebAPI+mvc4.0+EasyUI快速开发框架+通用权限管理系统源码

    框架特色： 1、基于ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout的架构设计开发 2、采用MVC的框架模式...7、封装了一大部分比较实用的控件和组件，如自动完成控件、弹出控件、拼音模糊输入控件、日期控件、导出组件等

    基于 ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout 的架构设计开发

    二、框架特色 1、基于 ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout 的架构设计开发 ...7、封装了一大部分比较实用的控件和组件，如自动完成控件、弹出控件、拼音模糊输入控件、日期控件、导出组件等

    建筑材料管理系统

    1、基于 ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout 的架构设计开发 2、采用MVC的框架模式，具有耦合...7、封装了一大部分比较实用的控件和组件，如自动完成控件、弹出控件、拼音模糊输入控件、日期控件、导出组件等

    基于ASP.NET WebAPI+mvc4.0+EasyUI快速开发框架通用权限管理系统源码+说明教程文档.zip

    基于ASP.NET WebAPI+mvc4.0+EasyUI快速开发框架通用权限管理系统源码+说明教程文档: ...7、封装了一大部分比较实用的控件和组件，如自动完成控件、弹出控件、拼音模糊输入控件、日期控件、导出组件

    携程上的城市选择插件

    4. **结果显示**：更新UI，显示匹配的城市列表，可以是下拉菜单、弹出层或者浮动窗口等形式。 5. **选择反馈**：当用户选择一个城市后，更新输入框内容，并可能触发后续的操作，如跳转至新的搜索结果页或继续填写...

    计算机基础考试题库(含答案)(完整版)资料.doc

    22. 第一次保存文档：系统会弹出“保存”对话框，让用户指定文件名和保存位置。 23. Word表格单元格名称：在第三行第四列的单元格名称是D3，按照行列顺序命名。 这些知识点涵盖了计算机基础的多个方面，包括计算机...

    计算机基础试题题库与答案.doc

    17. 汉字的拼音输入码是外码，方便用户通过拼音输入汉字。 18. 剪贴板是Windows中的一个临时存储区域，可以存储文字、图片等信息。 19. 还原状态的Windows应用程序窗口无法实现旋转操作。 20. USB是通用串行总线...

    大学计算机考试题库里的全套习题解析.doc

    17. 汉字的拼音输入码是输入汉字的外码，方便用户输入。 18. 剪贴板是内存中的一块区域，用于临时存储信息。 19. 还原状态的Windows应用程序窗口无法进行旋转操作。 20. U盘通常使用USB接口与计算机连接。 21. Word...

    MVC+WebAPI+EasyUI+Knockout后台管理系统.zip

    基于Asp.Net MVC4.0 + WebAPI + Knockout 技术，采用EasyUI为前台开发展示UI，Knockout主要负责前端的...7、封装了一大部分比较实用的控件和组件，如自动完成控件、弹出控件、拼音模糊输入控件、日期控件、导出组件等

    大学计算机基础大一考试必备题库三.pdf

    17. 汉字的拼音输入码属于外码，是输入汉字的编码方式。 18. 剪贴板是内存中的一块区域，用于临时存储信息。 19. 对于还原状态的Windows应用程序窗口，不能进行旋转操作。 20. U盘通常连接到计算机的USB接口。 21. ...

    asp.net+Web+mvc4.0 EasyUI 最新 权限管理系统源码教程

    一、企业版简介 Zephyr.Net 企业版是基于Asp.Net MVC4.0 + WebAPI + Knockout 技术，采用EasyUI为前台...7、封装了一大部分比较实用的控件和组件，如自动完成控件、弹出控件、拼音模糊输入控件、日期控件、导出组件等

    《计算机组装与维护》习题与答案.doc

    17. 汉字的拼音输入码属于外码，是输入汉字的编码方式。 18. Windows剪贴板是临时存储信息的一块内存区域。 19. 对于还原状态的Windows应用程序窗口，不能进行旋转操作。 20. U盘通常连接到USB（Universal Serial ...

    2016年大学计算机基础试题题库及答案计算机等级考试题库资料.pdf

    17. 汉字的拼音输入码属于外码，用于输入汉字。 18. 剪贴板是内存中的一块区域，用于临时存储信息。 19. 还原状态的Windows应用程序窗口不能进行旋转操作。 20. U盘通常使用USB（Universal Serial Bus）接口。 21. ...

    mvc4.0 EasyUI 权限管理系统源码.7z

    框架特色： 1、基于ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout的架构设计开发 ...7、封装了一大部分比较实用的控件和组件，如自动完成控件、弹出控件、拼音模糊输入控件、日期控件、导出组件等.

    计算机1.doc

    17. 汉字的拼音输出码是输入码的一种，方便用户通过拼音输入汉字。 18. 剪贴板是内存中的一块区域，用于临时存储复制或剪切的信息。 19. 对于恢复状态的Windows应用程序窗口，不能进行最大化操作。 20. U盘通常...

Magicbox
Global site tag (gtag.js) - Google Analytics