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
搜索
積分與排名
積分 - 32660
排名 - 1315
最新評論
1.?re: JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
werewrewrwer
--wrewrwe
2.?re: struts啟動的一個(gè)錯(cuò)誤!
更名struts-config.xml, remove && add struts capability,重新生成一個(gè)config.xml。
--barryken
3.?p
42
--2
4.?re: hql語句----隨機(jī)查詢?nèi)☆^10條記錄[未登錄]
沒意思,這不就是分頁的那一部分代碼嘛!
--啊啊
5.?re: 第一次做成功的AXIS例子[未登錄]
樓主:能不能留下你的聯(lián)系方式!探討一下相關(guān)問題...
--hehe
閱讀排行榜
1.?JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1(7288)
2.?第一次做成功的AXIS例子(2424)
3.?命令行創(chuàng)建ODBC數(shù)據(jù)源(1542)
4.?struts啟動的一個(gè)錯(cuò)誤!(1263)
5.?hibernate調(diào)用存儲過程例子(1003)
評論排行榜
1.?JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1(7)
2.?第一次做成功的AXIS例子(5)
3.?struts啟動的一個(gè)錯(cuò)誤!(4)
4.?轉(zhuǎn):如何在JAVA中使用日期 (0)
5.?命令行創(chuàng)建ODBC數(shù)據(jù)源(0)
View Post
JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
本來打算在網(wǎng)上找一個(gè)相關(guān)功能的代碼用用的,找到DOJO的代碼,本來打算把DOJO的類抽取出來,只留下COMBOBOX輸入提示功能的,不過沒搞明白它的包加載機(jī)制,只好自己寫了!
示例:
當(dāng)在文本框中打入"黑色、紅色、黃色、蘭色、綠色、灰色、蘭色、棕色、白色"中的一個(gè)詞的開頭字的時(shí)候,會出現(xiàn)選擇框的提示功能。上下鍵選擇選擇框中的內(nèi)容,回車確定選取的內(nèi)容,并補(bǔ)全內(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;
????
//
點(diǎn)擊鍵盤上下鍵,選擇框得到焦點(diǎn)
????
if
((keyCode
==
38
?
||
?keyCode
==
40
)?
&&
?oDiv.style.visibility?
==
?
"
visible
"
)
{
????????oSelect.focus();
????}
????
//
選擇框圖層顯示時(shí),點(diǎn)擊回車選擇第一個(gè)選項(xiàng)
????
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--?圖層隱藏后,要得到焦點(diǎn)的對象
*/
function
?hideTip(oDiv,oFocus)
{
????oDiv.style.visibility?
=
?
"
hidden
"
;
????oFocus.focus();
}
/**/
/*
匹配驗(yàn)證?
oArea?--?需要驗(yàn)證的內(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
>
本來應(yīng)該是選擇提示框顯示在光標(biāo)顯示位置的,不過沒找到得到光標(biāo)顯示位置的相關(guān)代碼。
posted on 2006-11-22 14:02
young
閱讀(7288)
評論(7)
編輯
收藏
所屬分類:
js
View Comments
#
re: JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
回復(fù)
更多評論
支持一下! 你可以看看這個(gè)教程.. 比較好的.
http://www.dynamicajax.com/fr/AJAX_Suggest_Tutorial-271_290_312.html
歡迎來我博客留言支持!
2006-11-22 14:42 |
BeanSoft
#
re: JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
回復(fù)
更多評論
Javascript 也應(yīng)該面向?qū)ο笱絶 老大..........
2006-11-23 22:52 |
Web 2.0 技術(shù)資源
#
re: JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
回復(fù)
更多評論
@Web 2.0 技術(shù)資源
本來是打算在網(wǎng)上找一段實(shí)現(xiàn)功能簡單的代碼,自己再改改,可就是沒找到,只好自己啃書寫一段了。
沒辦法,現(xiàn)在是項(xiàng)目急要功能,也管不了什么面向?qū)ο罅耍扔泄δ芎笥懈倪M(jìn)嘛!
2006-11-24 10:13 |
young
#
re: JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
回復(fù)
更多評論
老大有錯(cuò)誤啊,怎么調(diào)試不出來啊,功能實(shí)現(xiàn)不了啊.
2007-09-23 11:22 |
肖飛
#
re: JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
回復(fù)
更多評論
@肖飛
格式發(fā)布后做了轉(zhuǎn)換的,你可以自己再改改,問題還是蠻多的。
http://www.aygfsteel.com/Files/yyg1107/輸入提示-層浮動恒顯示.rar
2007-09-24 10:11 |
young
#
re: JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
回復(fù)
更多評論
hao!
2008-01-25 11:22 |
name
#
re: JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
回復(fù)
更多評論
werewrewrwer
2012-02-09 22:30 |
wrewrwe
新用戶注冊
刷新評論列表
只有注冊用戶
登錄
后才能發(fā)表評論。
網(wǎng)站導(dǎo)航:
博客園
IT新聞
Chat2DB
C++博客
博問
相關(guān)文章:
沒有工具欄、菜單的頁面
JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
Powered by:
BlogJava
Copyright © young
主站蜘蛛池模板:
邵东县
|
托克逊县
|
天等县
|
桐庐县
|
泸西县
|
右玉县
|
玉环县
|
汝州市
|
永善县
|
宜君县
|
周至县
|
南溪县
|
建宁县
|
桐柏县
|
高平市
|
龙里县
|
大竹县
|
文登市
|
平度市
|
灯塔市
|
犍为县
|
新昌县
|
延川县
|
青浦区
|
余姚市
|
阳春市
|
通道
|
互助
|
九江市
|
托克逊县
|
襄汾县
|
佛山市
|
九龙坡区
|
伊宁县
|
博客
|
秦皇岛市
|
安吉县
|
承德县
|
宁夏
|
三明市
|
敦化市
|