在网页设计中我们经常需要用户进行输入操作,下面我分享两种用户的输入功能。
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>
只要input中list属性等于datalist的id多久可以了,option中就是就是完整信息。
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>