利用js實現輸入框動態提示資訊

2021-07-15 07:03:05 字數 1349 閱讀 7663

設計思路是:在輸入框input的元件下面放置乙個div,這個div主要是為了提示資訊的展示功能,類似於下拉框那種形式。

步驟一:在網頁載入的時候會首先把輸入框中要查詢的資訊全部載入出來,並且放置在乙個全域性變數中。

步驟二:當使用者在輸入框中輸入資訊的時候會觸發響應函式,函式的主要功能是獲取使用者的輸入值並繼續監控使用者後續的輸入值,然後把輸入值進行處理,於快取中的全域性變數進行對比操作,把快取中相同的部分返回給上面提到過的div,div中就顯示了和使用者輸入條件相類似的資訊,提供使用者選擇。

步驟三:使用者在選單中選擇自己想要的資訊,通過js**實現將選擇的資訊返回到輸入框中去。

大體的設計思路就是這樣,現在看看具體的例子:

1.選單顯示的樣式資訊:

.auto_hidden 

.auto_show

.auto_onmouseover

.auto_onmouseout

2.js部分的處理**:

var bind = function(object, fun) 

}function autocomplete(obj,autoobj,arr)

autocomplete.prototype=,

//刪除自動完成需要的所有div

deletediv: function()

this.autoobj.classname="auto_hidden";

},//設定值

setvalue: function(_this)

},//模擬滑鼠移動至div時,div高亮

autoonmouseover: function(_this,_div_index)else if(this.index==length)

this.changeclassname(length);

}//游標鍵"↑"

else if(event.keycode==38)else if(this.index==-1)

this.changeclassname(length);

}//回車鍵

else if(event.keycode==13)else

},//程式入口

start: function(event)//值為空,退出

trycatch (e)

var div_index=0;//記錄建立的div的索引

for(var i=0;i

html中的實現**:

輸入值:

執行截圖:

Salesforce 輸入框提示的實現

然後將js包儲存在static resource中,並載入到頁面上 suggest suggest div suggest div.select suggest div.over 然後在頁面中的輸入框下新增suggest元素 最後新增js 在頁面載入時為suggest賦值 new suggest.l...

分析 input表單輸入框預設提示資訊

我之前也做過,做法應該和大家都差不多,在輸入框裡寫入提示內容,當滑鼠獲取焦點後清空內容,當失去焦點後判斷內容是否為空,如果為空,則恢復顯示提示內容,反則不顯示。但這樣的做法是否合理?下面一一來做下分析。1 如果輸入內容和提示內容完全一樣,當失去焦點後,應該如何判斷?2 如果input在表單裡,提交表...

原生js獲取單選 輸入框資訊

一 表單輸入框與單選值獲取 直接通過form中屬性name值獲取 lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle show style head name m...