yyg1107
这家伙很懒,什么都没有留下
posts(15)
comments(20)
trackbacks(0)
BlogJava
联系
聚合
管理
公告
联系方式:
常用链接
我的随笔
我的评论
我的参与
最新评论
留言簿
给我留言
查看公开留言
查看私人留言
随笔分类
(11)
axis(1)
hibernate(1)
java(2)
js(2)
other(5)
随笔档案
(8)
2008年6月 (1)
2007年8月 (2)
2007年4月 (3)
2006年11月 (2)
文章分类
(37)
C++Builder(3)
eclipse(2)
html(4)
java(8)
jbpm(6)
JS(4)
other(4)
question handly!(4)
web容器(1)
workflow(1)
文章档案
(36)
2007年4月 (2)
2007年3月 (1)
2007年1月 (2)
2006年12月 (2)
2006年11月 (3)
2006年10月 (11)
2006年9月 (2)
2006年7月 (2)
2006年6月 (1)
2006年5月 (1)
2006年4月 (6)
2006年3月 (3)
新闻档案
(1)
2007年1月 (1)
收藏夹
(16)
好的BLOG(9)
收藏----blog(7)
JavaBlog
amigoxie
matrix
搜索
积分与排名
积分 - 32109
排名 - 1319
最新评论
1. re: JS实现文本框输入提供选择框的提示功能-1
werewrewrwer
--wrewrwe
2. re: struts启动的一个错误!
更名struts-config.xml, remove && add struts capability,重新生成一个config.xml。
--barryken
3. p
42
--2
4. re: hql语句----随机查询取头10条记录[未登录]
没意思,这不就是分页的那一部分代码嘛!
--啊啊
5. re: 第一次做成功的AXIS例子[未登录]
楼主:能不能留下你的联系方式!探讨一下相关问题...
--hehe
阅读排行榜
1. JS实现文本框输入提供选择框的提示功能-1(7264)
2. 第一次做成功的AXIS例子(2405)
3. 命令行创建ODBC数据源(1526)
4. struts启动的一个错误!(1247)
5. hibernate调用存储过程例子(987)
评论排行榜
1. JS实现文本框输入提供选择框的提示功能-1(7)
2. 第一次做成功的AXIS例子(5)
3. struts启动的一个错误!(4)
4. 转:如何在JAVA中使用日期 (0)
5. 命令行创建ODBC数据源(0)
View Post
JS实现文本框输入提供选择框的提示功能-1
本来打算在网上找一个相关功能的代码用用的,找到DOJO的代码,本来打算把DOJO的类抽取出来,只留下COMBOBOX输入提示功能的,不过没搞明白它的包加载机制,只好自己写了!
示例:
当在文本框中打入"黑色、红色、黄色、兰色、绿色、灰色、兰色、棕色、白色"中的一个词的开头字的时候,会出现选择框的提示功能。上下键选择选择框中的内容,回车确定选取的内容,并补全内容到文本框中。
示例代码如下:
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
<
HTML
>
<
HEAD
>
<
TITLE
>
New Document
</
TITLE
>
<
META
NAME
="Generator"
CONTENT
="EditPlus"
>
<
META
NAME
="Author"
CONTENT
=""
>
<
META
NAME
="Keywords"
CONTENT
=""
>
<
META
NAME
="Description"
CONTENT
=""
>
<
SCRIPT
LANGUAGE
="JavaScript"
>
<!--
var
showFlag
=
0
;
//
0.弹出提示框;1.取消弹出提示框
var
textLength
=
0
;
//
文本长度
document.onkeydown
=
function
keyDown()
{
var
keyCode
=
event.keyCode;
var
oSelect
=
document.getElementById(
"
select1
"
);
var
oDiv
=
document.getElementById(
"
divTip1
"
);
var
oArea
=
document.getElementById(
"
area1
"
);
var
sValue
=
oArea.value;
//
点击键盘上下键,选择框得到焦点
if
((keyCode
==
38
||
keyCode
==
40
)
&&
oDiv.style.visibility
==
"
visible
"
)
{
oSelect.focus();
}
//
选择框图层显示时,点击回车选择第一个选项
if
(oDiv.style.visibility
==
"
visible
"
&&
keyCode
==
13
)
{
oSelect.focus();
oSelect.selectedIndex
=
0
;
oArea.value
=
sValue.substring(
0
,sValue.length
-
1
)
+
oSelect.value;
hideTip(oDiv,oArea);
//
隐藏图层select
//
show1.innerHTML = oSelect.value;
}
}
/**/
/*
选取值,添加到textarea
oArea -- 添加值的对象
oSelect -- 选择值的对象
//var oArea = document.getElementById("area1");
//var oSelect = document.getElementById("select1");
*/
function
selectedValue(oDiv,oArea ,oSelect)
{
var
sValue
=
oArea.value;
oArea.value
=
sValue.substring(
0
,sValue.length
-
1
)
+
oSelect.value;
hideTip(oDiv,oArea);
//
隐藏图层select
}
/**/
/*
显示图层select
oDiv -- 要显示的图层对象
oArea -- 要显示的图层位置的对象
//var oDiv = document.getElementById("divTip1");
//var oArea=document.getElementById("area1");
*/
function
showTip(oDiv,oArea,oSelect)
{
if
(checkValue(oArea)
&&
showFlag
==
0
)
{
oDiv.style.visibility
=
"
visible
"
;
oSelect.focus();
var
t
=
oArea.offsetTop
+
event.srcElement.createTextRange().text.length;
var
l
=
oArea.offsetLeft
+
event.srcElement.createTextRange().text.length;
oDiv.style.left
=
l
*
2
+
10
;
oDiv.style.top
=
t
*
2
+
10
;
}
else
{
hideTip(oDiv,oArea);
}
}
/**/
/*
隐藏图层select
oDiv -- 要隐藏的图层对象
oFocus-- 图层隐藏后,要得到焦点的对象
*/
function
hideTip(oDiv,oFocus)
{
oDiv.style.visibility
=
"
hidden
"
;
oFocus.focus();
}
/**/
/*
匹配验证
oArea -- 需要验证的内容
*/
function
checkValue(oArea)
{
var
template
=
[
"
黑色
"
,
"
红色
"
,
"
黄色
"
,
"
兰色
"
,
"
绿色
"
,
"
灰色
"
,
"
兰色
"
,
"
棕色
"
,
"
白色
"
]
var
oSelect
=
document.getElementById(
"
select1
"
);
var
lastSelectText
=
oArea.value.charAt(oArea.value.length
-
1
);
if
(oArea.value.length
!=
textLength)
{
textLength
=
oArea.value.length;
showFlag
=
0
;
}
oSelect.length
=
0
;
for
(
var
i
=
0
;i
<
template.length;i
++
)
{
if
(template[i].indexOf(lastSelectText)
==
0
&&
lastSelectText
!=
""
)
{
var
option
=
new
Option(template[i],template[i]);
try
{
oSelect.add(option);
}
catch
(e)
{}
}
}
var
iNewSize
=
oSelect.length;
oSelect.size
=
iNewSize;
if
(iNewSize
==
0
)
return
false
;
else
return
true
;
}
function
cannelShowTip()
{
showFlag
=
1
;
}
//
-->
</
SCRIPT
>
</
HEAD
>
<
BODY
>
<
TEXTAREA
id
="area1"
NAME
="area1"
ROWS
="20"
COLS
="100"
onkeyup
="showTip(divTip1,this,select1)"
onClick
="showTip(divTip1,this,select1)"
onFocus
="cannelShowTip()"
></
TEXTAREA
>
<
div
id
="divTip1"
style
="position:absolute;visibility:hidden;padding:5px"
>
<
select
id
="select1"
name
="select1"
mulitple
="mulitple"
size
="4"
onclick
="selectedValue(divTip1,area1,this)"
>
<
option
value
=1
>
1
</
option
>
<
option
value
=11
>
11
</
option
>
<
option
value
=2
>
2
</
option
>
<
option
value
=3
>
3
</
option
>
</
select
>
</
div
>
<
INPUT
TYPE
="button"
NAME
=""
onclick
=""
>
<
div
id
=show1
></
div
>
<
div
id
=show2
></
div
>
</
BODY
>
</
HTML
>
本来应该是选择提示框显示在光标显示位置的,不过没找到得到光标显示位置的相关代码。
posted on 2006-11-22 14:02
young
阅读(7264)
评论(7)
编辑
收藏
所属分类:
js
View Comments
#
re: JS实现文本框输入提供选择框的提示功能-1
回复
更多评论
支持一下! 你可以看看这个教程.. 比较好的.
http://www.dynamicajax.com/fr/AJAX_Suggest_Tutorial-271_290_312.html
欢迎来我博客留言支持!
2006-11-22 14:42 |
BeanSoft
#
re: JS实现文本框输入提供选择框的提示功能-1
回复
更多评论
Javascript 也应该面向对象呀~ 老大..........
2006-11-23 22:52 |
Web 2.0 技术资源
#
re: JS实现文本框输入提供选择框的提示功能-1
回复
更多评论
@Web 2.0 技术资源
本来是打算在网上找一段实现功能简单的代码,自己再改改,可就是没找到,只好自己啃书写一段了。
没办法,现在是项目急要功能,也管不了什么面向对象了,先有功能后有改进嘛!
2006-11-24 10:13 |
young
#
re: JS实现文本框输入提供选择框的提示功能-1
回复
更多评论
老大有错误啊,怎么调试不出来啊,功能实现不了啊.
2007-09-23 11:22 |
肖飞
#
re: JS实现文本框输入提供选择框的提示功能-1
回复
更多评论
@肖飞
格式发布后做了转换的,你可以自己再改改,问题还是蛮多的。
http://www.blogjava.net/Files/yyg1107/输入提示-层浮动恒显示.rar
2007-09-24 10:11 |
young
#
re: JS实现文本框输入提供选择框的提示功能-1
回复
更多评论
hao!
2008-01-25 11:22 |
name
#
re: JS实现文本框输入提供选择框的提示功能-1
回复
更多评论
werewrewrwer
2012-02-09 22:30 |
wrewrwe
新用户注册
刷新评论列表
只有注册用户
登录
后才能发表评论。
网站导航:
博客园
IT新闻
Chat2DB
C++博客
博问
管理
相关文章:
没有工具栏、菜单的页面
JS实现文本框输入提供选择框的提示功能-1