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
搜索
積分與排名
積分 - 32659
排名 - 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語句----隨機查詢取頭10條記錄[未登錄]
沒意思,這不就是分頁的那一部分代碼嘛!
--啊啊
5.?re: 第一次做成功的AXIS例子[未登錄]
樓主:能不能留下你的聯(lián)系方式!探討一下相關問題...
--hehe
閱讀排行榜
1.?JS實現(xiàn)文本框輸入提供選擇框的提示功能-1(7288)
2.?第一次做成功的AXIS例子(2424)
3.?命令行創(chuàng)建ODBC數(shù)據源(1541)
4.?struts啟動的一個錯誤!(1263)
5.?hibernate調用存儲過程例子(1003)
評論排行榜
1.?JS實現(xiàn)文本框輸入提供選擇框的提示功能-1(7)
2.?第一次做成功的AXIS例子(5)
3.?struts啟動的一個錯誤!(4)
4.?轉:如何在JAVA中使用日期 (0)
5.?命令行創(chuàng)建ODBC數(shù)據源(0)
View Post
JS實現(xiàn)文本框輸入提供選擇框的提示功能-1
本來打算在網上找一個相關功能的代碼用用的,找到DOJO的代碼,本來打算把DOJO的類抽取出來,只留下COMBOBOX輸入提示功能的,不過沒搞明白它的包加載機制,只好自己寫了!
示例:
當在文本框中打入"黑色、紅色、黃色、蘭色、綠色、灰色、蘭色、棕色、白色"中的一個詞的開頭字的時候,會出現(xiàn)選擇框的提示功能。上下鍵選擇選擇框中的內容,回車確定選取的內容,并補全內容到文本框中。
示例代碼如下:
<!
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
閱讀(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 技術資源
本來是打算在網上找一段實現(xiàn)功能簡單的代碼,自己再改改,可就是沒找到,只好自己啃書寫一段了。
沒辦法,現(xiàn)在是項目急要功能,也管不了什么面向對象了,先有功能后有改進嘛!
2006-11-24 10:13 |
young
#
re: JS實現(xiàn)文本框輸入提供選擇框的提示功能-1
回復
更多評論
老大有錯誤啊,怎么調試不出來啊,功能實現(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ā)表評論。
網站導航:
博客園
IT新聞
Chat2DB
C++博客
博問
管理
相關文章:
沒有工具欄、菜單的頁面
JS實現(xiàn)文本框輸入提供選擇框的提示功能-1
Powered by:
BlogJava
Copyright © young
主站蜘蛛池模板:
太湖县
|
通城县
|
济阳县
|
浑源县
|
甘谷县
|
南和县
|
溧阳市
|
广昌县
|
莱芜市
|
樟树市
|
夏邑县
|
广水市
|
光山县
|
循化
|
任丘市
|
横山县
|
新津县
|
辽阳县
|
遵义市
|
根河市
|
贵港市
|
太保市
|
枣阳市
|
田东县
|
德令哈市
|
嘉鱼县
|
甘泉县
|
湟中县
|
鄂尔多斯市
|
剑川县
|
姚安县
|
犍为县
|
柳江县
|
崇左市
|
玉环县
|
吉林省
|
尼木县
|
龙南县
|
融水
|
涪陵区
|
抚远县
|