網頁中文字框下拉選擇輸入與自動提示功能的實現
阿新 • • 發佈:2019-01-29
在網頁設計中我們經常需要使用者進行輸入操作,下面我分享兩種使用者的輸入功能。
1.輸入框自動提示
瀏覽網頁的時候我們經常會遇到輸入框內我們輸入前幾個字,輸入框就會出現下拉提示你可能要輸入的完整資訊。如下:
要實現著這種功能可以使用datalist屬性就行。具體實現程式碼為:
只要input中list屬性等於datalist的id多久可以了,option中就是就是完整資訊。<span style="font-size:14px;"> <input type="text" class="form-control" aria-describedby="basic-addon1" list="category"> <datalist id="category"> <option value="繩編"> <option value="紙藝"> <option value="木工"> </datalist> </span>
2.文字輸入框下拉選擇輸入
就是點選輸入框出現下拉選單,使用者只能從選單中選擇輸入。
大家都知道<selsec>標籤是可以做選擇的,那麼如何與輸入框結合起來呢?
我的想法是剛開始就把文字輸入框和selsec選擇框並排放好,其中select選擇框的display設為none這樣的話選擇框一開始是看不見的,當文字框聚焦後,觸發js事件使得文字框display值為none,輸入框的display值為block這樣使用者就可以選擇輸入了
具體實現程式碼:
<input type="text" name="t" id="t" onFocus="showSelect();" style=" width:180px; height:30px"> <select name="sel" id="sel" style="display:none; width:180px;height:30px"> <option value="0">c++面向物件程式設計</option> <option value="1">資料結構</option> <option value="2">C語言</option> <option value="3">JAVA語言</option> </select>
<script type="text/javascript">
function showSelect(){
var _t = document.getElementById('t');
var _s = document.getElementById('sel');
if( _t.style.display == ''){
_t.style.display = 'none';
}
else{
_t.style.display = '';
}
if ( _s.style.display == 'none' ){
_s.style.display = '';
}
else{
_s.style.display = 'none';
}
}
</script>