类似于ie地址栏的下拉列表：回车提交，动态提示(摘录)

最新推荐文章于 2024-05-23 09:32:41 发布
最新推荐文章于 2024-05-23 09:32:41 发布
阅读量1k 收藏
点赞数
分类专栏： HTC专题 文章标签： ie function dropdown null table html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuehouniao/article/details/297244
版权

原文: http://www.51js.com/viewthread.php?fpage=2&tid=4753
index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 类似于ie地址栏的下拉列表：回车提交，动态提示</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</HEAD>

<BODY bgcolor="menu">
类似于ie地址栏的下拉列表：回车提交，动态提示
<?XML:NAMESPACE PREFIX="AXTeam" />
<?IMPORT NAMESPACE="AXTeam" IMPLEMENTATION="ComboBox.htc" />
<AXTeam:ComboBox id="ComboBox1" width='200'>

 <AXTeam:option>雪候鸟</AXTeam:option>
 <AXTeam:option>http://www.51.net</AXTeam:option>
 <AXTeam:option>http://csdn.net</AXTeam:option>
 <AXTeam:option>雪地冰天</AXTeam:option>
 <AXTeam:option>file://C:</AXTeam:option>
 <AXTeam:option>C:/winnt</AXTeam:option>

</AXTeam:ComboBox>
</BODY>
</HTML>
ComboBox.htc

 //作者：宝玉
//Mail:junminliu@msn.com
//日期：2003-01-16

<public:component tagname="ComboBox" literalcontent="true">
<public:method name="CreateComboBox" internalname="f_PublicCreateComboBox" />
<public:method name="CreateComboBoxIpt" internalname="f_PublicCreateComboBoxIpt" />
<public:method name="CreateDropDown" internalname="f_PublicCreateDropDown" />
<public:method name="CreateDropList" internalname="f_PublicCreateDropList" />
<public:method name="CreatePopup" internalname="f_PublicCreatePopup" />

<public:attach event="oncontentready" onevent="f_CreateComboBox()" />
<SCRIPT LANGUAGE="JScript">
var oPopup = null;
var ComboBox = null;
var ComboBoxIpt = null;
var DropDown = null;
var DropList = null;
var aNodes = new Array();
function f_CreateComboBox()
{
 aNodes = f_CreateNodes(element.innerHTML);
 DropList = f_PublicCreateDropList();
 f_PublicCreateDropListData(aNodes);
 ComboBox = f_PublicCreateComboBox();
 ComboBoxIpt = f_PublicCreateComboBoxIpt();
 DropDown = f_PublicCreateDropDown();
 oPopup = f_PublicCreatePopup()
 ComboBox.attachEvent("onmouseover",fnMouseover);
 ComboBox.attachEvent("onmouseout",fnMouseout);
 DropDown.attachEvent("onmousedown",fnMousedown);
 ComboBoxIpt.attachEvent("onfocus",ComboBoxFocus);
 ComboBoxIpt.attachEvent("onblur",ComboBoxBlur);
 ComboBoxIpt.attachEvent("onkeyup",ComboBoxKeyup);
 window.document.attachEvent("onclick", chkstat);
}
function f_PublicCreateComboBox()
{
 var oTable = window.document.createElement("TABLE");
 oTable.cellSpacing = 1;
 oTable.cellPadding = 0;
 oTable.id = "AXTeamComboBox"+uniqueID;
 oTable.style.display = "inline";
 oTable.border = 0;
 oTable.bgColor = "#FFFFFF";
 element.insertAdjacentElement("BeforeBegin",oTable);
 oTable.ComboBoxFocus = false;
 return oTable;
}
function f_PublicCreateComboBoxIpt()
{
 var oInput = window.document.createElement("INPUT");
 oInput.type = "text";
 oInput.style.border = 0;
 oInput.style.width = element.width;
 oInput.style.height = 15;
 oInput.id = "AXTeamComboBoxIpt"+uniqueID;
 ComboBox.insertRow().insertCell().appendChild(oInput);
 ComboBox.rows[0].bgColor = "#FFFFFF";
 return oInput;
}
function f_PublicCreateDropDown()
{
 var oTable = window.document.createElement("TABLE");
 oTable.cellSpacing = 0;
 oTable.cellPadding = 0;
 oTable.id = "AXTeamDropDown"+uniqueID;
 oTable.border = 0;
 oTable.bgColor="#DBD8D1";
 oTable.style.cssText = "display:inline;cursor:default;";
 oTable.attachEvent("onselectstart", fnCancel);
 var otd = oTable.insertRow().insertCell();
 otd.style.cssText = "font-family: webdings;font-size:8px;text-align: center;width:13px;height:17px;";
 otd.innerText = "6";
 ComboBox.rows[0].insertCell().appendChild(oTable);
 return oTable;
}
function f_PublicCreateDropList()
{
 var oTable = window.document.createElement("TABLE");
 oTable.cellSpacing = 1;
 oTable.cellPadding = 0;
 oTable.border = 0;
 oTable.bgColor="#FFFFFF";
 oTable.style.cssText = "font-size:9pt;cursor:default;border:1px solid #666666;";
 oTable.attachEvent("onselectstart", fnCancel);
 return oTable;
}
function f_PublicCreateDropListData(aNodes,redata)
{
 if(!redata)
  var re=new RegExp("^");
 else
  var re=new RegExp("^"+redata,"i");
 var otd = null;
 var No=DropList.rows.length;
        for(i=0;i<No;i++)DropList.deleteRow();
 for(var i=0;i<aNodes.length;i++)
 {
  if(re.test(aNodes[i])==true)
  {
   otd = DropList.insertRow().insertCell();
   otd.style.height = "12px";
   otd.innerHTML = aNodes[i];
   otd.attachEvent("onmouseover",DropListOver);
   otd.attachEvent("onmouseout",DropListOut);
   otd.attachEvent("onclick",DropListClick);
  }
 }

}
function f_PublicCreatePopup()
{
 var oSpan = element.document.createElement("span");
 oSpan.style.cssText = " position:absolute;display:none;cursor:default;z-index:100;";
 window.document.body.appendChild(oSpan);
 return oSpan;
}
function f_CreateNodes(htmlText)
{
 var oSpan = element.document.createElement("span");
 oSpan.innerHTML = htmlText;
 var xNodes = oSpan.childNodes;
 var Nodes = new Array();
 var nNumNodes = (xNodes == null) ? 0 : xNodes.length;
 for (var nIndex = 0; nIndex < nNumNodes; nIndex++)
 {
  var node = xNodes[nIndex];
  if (node != null)
   Nodes = Nodes.concat(f_CreateDropListItems(node));
 }
 return Nodes;
}
function f_CreateDropListItems(oNode)
{
 var rNodes;
 var szTagName = (oNode.tagName == null) ? "" : oNode.tagName.toLowerCase();
 if(szTagName == "option")
 {
  var szText = oNode.innerText;
  rNodes = new Array(szText);
 }
 else
  rNodes = new Array();
 return rNodes;
}
function fnMouseover()
{
 if(ComboBox.ComboBoxFocus) return;
 overstat();
}
function fnMouseout()
{
 if(ComboBox.ComboBoxFocus) return;
 defaultstat();
}
function fnMousedown()
{
 if(event.srcElement != ComboBoxIpt)
 {
  if(oPopup.style.display == '')
  {
   oPopup.style.display = 'none';
   DropDown.style.color = "#000000";
   return;
  }
  f_PublicCreateDropListData(aNodes)
  ComboBoxIpt.select();
  DropDown.style.color = "#FFFFFF";
 }
 oPopup.appendChild(DropList);
 oPopup.style.width = (oPopup.offsetWidth < ComboBox.offsetWidth) ? ComboBox.offsetWidth : oPopup.offsetWidth;
 oPopup.style.left = getx(ComboBox);
 oPopup.style.top = gety(ComboBox)+19;
 oPopup.style.display = '';
 oPopup.children[0].width = "100%";
 ComboBox.ComboBoxFocus = true;
}
function overstat()
{
 ComboBox.bgColor="#0A246A";
 DropDown.bgColor="#B6BDD2";
 DropDown.style.color = "#000000";
}
function defaultstat()
{
 ComboBox.bgColor="#FFFFF";
 DropDown.bgColor="#DBD8D1";
 DropDown.style.color = "#000000";
}
function DropListOver()
{
 obj = event.srcElement;
 obj.bgColor='highlight';obj.style.color='#FFFFFF';obj.style.cursor='default';
}
function DropListOut()
{
 obj = event.srcElement;
 obj.bgColor='#FFFFFF';obj.style.color='#000000';
}
function DropListClick()
{
 obj = event.srcElement;
 ComboBoxIpt.value = obj.innerText;
 oPopup.style.display = "none";
 ComboBoxIpt.select();
 DropDown.style.color = '#000000';
}
function ComboBoxFocus()
{
 if(ComboBox.ComboBoxFocus) return;
 ComboBox.ComboBoxFocus = true;
 overstat();
}
function ComboBoxBlur()
{
 if(ComboBox.ComboBoxFocus) return;
 defaultstat();
}
function ComboBoxKeyup()
{
 f_PublicCreateDropListData(aNodes,ComboBoxIpt.value);
 fnMousedown();
 addOption();
}
function addOption(){
 if(event.keyCode==13)
 {
 aNodes[aNodes.length] = ComboBoxIpt.value;
 } 
}

function chkstat()
{
 var oEl = event.srcElement;
 while( null != oEl && oEl != ComboBox)
 {
  oEl = oEl.parentElement;
 }
 if(oEl == null)
 {
  defaultstat();
  ComboBox.ComboBoxFocus = false;
  oPopup.style.display = "none";
 }
}

function fnCancel()
{
 return false;
}
function getx(e)
{
 var l=e.offsetLeft;
 while(e=e.offsetParent){
  l+=e.offsetLeft;
 }
 return l;
}
function gety(e)
{
 var t=e.offsetTop;
 while(e=e.offsetParent){
  t+=e.offsetTop;
 }
 return t;
}
</SCRIPT>

xuehouniao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
禁止按回车键提交表单的方法
09-03
主要介绍了禁止按回车键提交表单的方法的相关资料,需要的朋友可以参考下
文本框回车提交与禁止提交示例
09-05
本框输入数据后使用回车进行提交，想必大家都尝试过吧，在本文有个不错的示例，喜欢的朋友可以参下
转：Windows Shell 编程 第五章_1
spiderlily的专栏
12-10 693
转自：http://yadang418.blog.163.com/blog/static/2684365620096533937590/   第五章浏览文件夹         我在第二章中给出了文件夹的概览和它在Windows Shell中的地位，在这一章中我们打算更详细地讨论它们。我们主要集中精力阐述涉及文件夹所有层面的Shell函数，以及保证所有操作顺利进行的潜在机理。因此，我们需要
Keil MDK从未有过的详细使用讲解
BrianO'con的博客
10-16 3679
熟悉Keil C 51的朋友对于Keil MDK上手应该比较容易，毕竟界面是很像的。但ARM内核毕竟不同于51内核，因此无论在设置上还是在编程思想上，都需要下番功夫研究的。本文以MDK V4.03为例，详细的写一下MDK的设置、界面、工具。可能会有些杂乱，但我想所涉及的东西都是最常用的；可能不是那么的严谨清晰，我想谁也没把我期望成专家！哈，有问题欢迎留言。正式开始。     首先启动MDK.当然要先
[转]Windows Shell 编程 第五章 【来源：http://blog.csdn.net/wangqiulin123456/article/details/7987939】...
weixin_30877181的博客
08-06 121
第五章浏览文件夹 我在第二章中给出了文件夹的概览和它在Windows Shell中的地位，在这一章中我们打算更详细地讨论它们。我们主要集中精力阐述涉及文件夹所有层面的Shell函数，以及保证所有操作顺利进行的潜在机理。因此，我们需要深入研究两个起着非常重要作用的概念：快捷方式和PIDLs。前者是下一章的题目，在这一章中我们将研究PIDLs，其中包括： ...
【表单标签（知识点超全版本）】
Hey_Coder
05-04 5789
表单标签1.表单标签1.1 表单标签 有哪些 ?1.2 HTML5 中的表单标签 有哪些 ?1.3 如何 为用户输入 创建 HTML 表单 ?1.4 如何 搜集 用户输入的信息 ?1.4.1 输入标签 有哪些常用属性 ?1.4.2 HTML5 中,输入标签 新增的属性 有哪些 ?1.4.3 输入元素的 类型有哪些 ?1.5 如何定义 多行文本输入 ?1.6 如何定义一个 按钮 ?1.7 如何创...
火狐插件
weixin_34318956的博客
01-07 3405
朗读文本: 扩展名叫“从文本到语音”，https://addons.mozilla.org/zh-CN/firefox/addon/text-to-voice/   修改了speak it  扩展的安装文件。使得可以瞒过火狐firefox的扩展版本检查。现在使用良好。当然需要配合自己安装的VW wang语音库。修改的插件可以在http://www.cnblogs.com/jinweijie/arc...
二、Python复习教程（重点）- 前端框架
花开如雨的博客
10-26 4950
目录导航： 文章目录目录导航：三、Web前端1.1 Web前端开发介绍1. Web网站介绍2. 动态网站开发所需的Web构件3. Web的工作原理1.2 HTML基础语法 （缺）1.3 HTML常用标签介绍1.3.1 文本标签:1.3.2 格式化标签:1.3.3 图片标签img*1.3.4 HTML中的超级链接*1.3.5 表格标签1.3.6 form表单标签 (其中1~5重点，其他了解)1.3.7 ``...`` 行内框架1.3.8 多媒体标签（了解）1.4 CSS层叠样式表介绍1.4.1 什么是CSS?
前端性能优化方法总结
热门推荐
羽过天晴
06-29 1万+
前端性能优化（一）前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ?　　1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。　　2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可...
Web端通用测试点
weixin_44218159的博客
05-11 967
通用性测试功能点: √ 文本输入框 √ 日期选择框 √ 表单测试 √ 数据校验 √ cookies √ 分页功能 √ 搜索功能(快捷搜索/高级搜索) √ 删除功能 √ 注册 √ 登录 √ 上传功能(图片/文件) √ 导出功能 √ 下载功能 √ 列表页面 √ Enter键 √ Tab键 √ URL链接 √ 链接测试(正确性/可用性/空链接) √ 业务流程测试 √ 安全性(sq注入/xss攻击) √ 第三方登录 √ 密码 √ 权限 √ 支付 √ 菜容(浏览器/分
《跟我一起学“网络安全”》——Windows
Cool_foolisher的博客
04-14 766
本篇文章是《跟我一起学“网络安全”》的第二章，介绍了Windows操作系统里的一系列基础知识，包括：Windows常用dos命令、WindowsServer搭建AD域、Windows之震网三代漏洞实验等。
js 回车提交表单两种实现方法
10-27
js 回车提交一些新手朋友还是比较陌生的，本文介绍两种实现方法:jQuery方法、JavaScript方法,感兴趣的朋友可以研究下
IE地址栏中的妙用大全
09-10
在IE地址栏中输入网址访问网站是IE地址栏最基本的功能。其实，IE地址栏还可以另有妙用，这些技巧在网吧等受网吧管理软件限制的场所非常有用，请看笔者总结的十则小技巧。 完全打开页面后，在该页的在IE地址栏 或 按...
jQuery实现邮箱下拉列表自动补全功能
01-21
•按回车键，选中列表内容，隐藏下拉列表 •鼠标经过，下拉列表选项设置为高亮 •鼠标点击，选中下拉列表选项，隐藏下拉列表 HTML HTML代码很简单，我们就一个简单的输入框，然后一个ul标签，在内部可以放好多li...
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 741
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
前端基础入门三大核心之HTML篇：构建网页世界的基石与HTML5的魔力
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 993
HTML是一种标记语言，它使用一系列标签来描述网页内容的结构和表现形式。这些标签告诉浏览器如何处理和显示文本、图片、视频等网页元素。从最基础的段落、标题到复杂的表格、表单，HTML都能轻松应对。
前端基础入门三大核心之HTML篇 —— IndexedDB详解
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 880
IndexedDB是一种运行在浏览器中的非关系型数据库，它允许web应用在用户的设备上存储大量结构化数据，包括文件和 blob 数据类型。与传统的Cookie和localStorage相比，IndexedDB支持复杂的查询、索引以及事务处理，特别适合处理大量或者复杂的数据集。在事件中定义对象仓库和索引。// 创建索引IndexedDB为前端开发者提供了强大的本地数据存储能力，是构建高性能Web应用不可或缺的工具。
DevExpress WinForms中文教程 - HTML & CSS支持的实战应用(二)
最新发布
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
05-23 1334
本文将为大家介绍如何使用DevExpress报表组件时实现按条件显示页面水印，欢迎下载相关组件体验！
与地址栏中按回车一样效果的javascript跳转代码
07-09
要实现与地址栏中按回车键一样的效果，可以使用以下 JavaScript 代码进行页面跳转： ```javascript window.location.reload(); // 刷新当前页面 ``` 这段代码将重新加载当前页面，类似于按下回车键后的效果。如果...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值