在網頁設計中我們經常需要使用者進行輸入操作，下面我分享兩種使用者的輸入功能。

       1.輸入框自動提示

        瀏覽網頁的時候我們經常會遇到輸入框內我們輸入前幾個字，輸入框就會出現下拉提示你可能要輸入的完整資訊。如下：

要實現著這種功能可以使用datalist屬性就行。具體實現程式碼為：

<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>