yyg1107
這家伙很懶,什么都沒有留下
posts(15)
comments(20)
trackbacks(0)
BlogJava
聯(lián)系
聚合
管理
公告
聯(lián)系方式:
常用鏈接
我的隨筆
我的評論
我的參與
最新評論
留言簿
給我留言
查看公開留言
查看私人留言
隨筆分類
(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
搜索
積分與排名
積分 - 32661
排名 - 1315
最新評論
1.?re: JS實現(xiàn)文本框輸入提供選擇框的提示功能-1
werewrewrwer
--wrewrwe
2.?re: struts啟動的一個錯誤!
更名struts-config.xml, remove && add struts capability,重新生成一個config.xml。
--barryken
3.?p
42
--2
4.?re: hql語句----隨機查詢?nèi)☆^10條記錄[未登錄]
沒意思,這不就是分頁的那一部分代碼嘛!
--啊啊
5.?re: 第一次做成功的AXIS例子[未登錄]
樓主:能不能留下你的聯(lián)系方式!探討一下相關問題...
--hehe
閱讀排行榜
1.?JS實現(xiàn)文本框輸入提供選擇框的提示功能-1(7288)
2.?第一次做成功的AXIS例子(2424)
3.?命令行創(chuàng)建ODBC數(shù)據(jù)源(1542)
4.?struts啟動的一個錯誤!(1263)
5.?hibernate調(diào)用存儲過程例子(1003)
評論排行榜
1.?JS實現(xiàn)文本框輸入提供選擇框的提示功能-1(7)
2.?第一次做成功的AXIS例子(5)
3.?struts啟動的一個錯誤!(4)
4.?轉:如何在JAVA中使用日期 (0)
5.?命令行創(chuàng)建ODBC數(shù)據(jù)源(0)
View Post
JS實現(xiàn)文本框輸入提供選擇框的提示功能-1
本來打算在網(wǎng)上找一個相關功能的代碼用用的,找到DOJO的代碼,本來打算把DOJO的類抽取出來,只留下COMBOBOX輸入提示功能的,不過沒搞明白它的包加載機制,只好自己寫了!
示例:
當在文本框中打入"黑色、紅色、黃色、蘭色、綠色、灰色、蘭色、棕色、白色"中的一個詞的開頭字的時候,會出現(xiàn)選擇框的提示功能。上下鍵選擇選擇框中的內(nèi)容,回車確定選取的內(nèi)容,并補全內(nèi)容到文本框中。
示例代碼如下:
<!
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?--?需要驗證的內(nèi)容
*/
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
閱讀(7288)
評論(7)
編輯
收藏
所屬分類:
js
View Comments
#
re: JS實現(xiàn)文本框輸入提供選擇框的提示功能-1
回復
更多評論
支持一下! 你可以看看這個教程.. 比較好的.
http://www.dynamicajax.com/fr/AJAX_Suggest_Tutorial-271_290_312.html
歡迎來我博客留言支持!
2006-11-22 14:42 |
BeanSoft
#
re: JS實現(xiàn)文本框輸入提供選擇框的提示功能-1
回復
更多評論
Javascript 也應該面向對象呀~ 老大..........
2006-11-23 22:52 |
Web 2.0 技術資源
#
re: JS實現(xiàn)文本框輸入提供選擇框的提示功能-1
回復
更多評論
@Web 2.0 技術資源
本來是打算在網(wǎng)上找一段實現(xiàn)功能簡單的代碼,自己再改改,可就是沒找到,只好自己啃書寫一段了。
沒辦法,現(xiàn)在是項目急要功能,也管不了什么面向對象了,先有功能后有改進嘛!
2006-11-24 10:13 |
young
#
re: JS實現(xiàn)文本框輸入提供選擇框的提示功能-1
回復
更多評論
老大有錯誤啊,怎么調(diào)試不出來啊,功能實現(xiàn)不了啊.
2007-09-23 11:22 |
肖飛
#
re: JS實現(xiàn)文本框輸入提供選擇框的提示功能-1
回復
更多評論
@肖飛
格式發(fā)布后做了轉換的,你可以自己再改改,問題還是蠻多的。
http://www.aygfsteel.com/Files/yyg1107/輸入提示-層浮動恒顯示.rar
2007-09-24 10:11 |
young
#
re: JS實現(xiàn)文本框輸入提供選擇框的提示功能-1
回復
更多評論
hao!
2008-01-25 11:22 |
name
#
re: JS實現(xiàn)文本框輸入提供選擇框的提示功能-1
回復
更多評論
werewrewrwer
2012-02-09 22:30 |
wrewrwe
新用戶注冊
刷新評論列表
只有注冊用戶
登錄
后才能發(fā)表評論。
網(wǎng)站導航:
博客園
IT新聞
Chat2DB
C++博客
博問
管理
相關文章:
沒有工具欄、菜單的頁面
JS實現(xiàn)文本框輸入提供選擇框的提示功能-1
Powered by:
BlogJava
Copyright © young
主站蜘蛛池模板:
凯里市
|
乐安县
|
阿克
|
汪清县
|
贵溪市
|
宕昌县
|
和硕县
|
冀州市
|
苍南县
|
平江县
|
井研县
|
新化县
|
惠水县
|
定日县
|
郯城县
|
新民市
|
屏边
|
威远县
|
凌海市
|
望谟县
|
大庆市
|
林周县
|
望江县
|
富源县
|
西乌珠穆沁旗
|
云霄县
|
永胜县
|
晋城
|
西华县
|
昆明市
|
八宿县
|
平顺县
|
龙岩市
|
泰安市
|
万宁市
|
江陵县
|
宁远县
|
武胜县
|
安庆市
|
新巴尔虎左旗
|
福安市
|