可输入可选择的input
因项目需要 要实现一个可选择可输入的下拉框,故写了一个
html代码
1 <div class="col-sm-10"> 2 <input type="text" id="" class="form-control" placeholder="请输入姓名"> 3 </div> 4 <div class="col-sm-10"> 5 <input type="text" id="h-input" class="form-control" placeholder="请输入成绩或选择身高"> 6 <div class="selInput" id="height"> 7 <ul> 8 <li>163cm</li> 9 <li>162cm</li> 10 </ul> 11 </div> 12 </div> 13 <div class="col-sm-10"> 14 <input type="text" id="w-input" class="form-control" placeholder="请输入或选择体重"> 15 <div class="selInput" id="weight"> 16 <ul> 17 <li>50kg</li> 18 <li>40kg</li> 19 </ul> 20 </div> 21 </div>
css代码:
1 .col-sm-10{ 2 position: relative; 3 } 4 input{ 5 display: block; 6 width: 130px; 7 height: 30px; 8 line-height: 30px; 9 } 10 .selInput{ 11 display: none; 12 position: absolute; 13 top: 30px; 14 left:8px; 15 width: 130px; 16 line-height: 30px; 17 z-index: 2; 18 background: #fff; 19 } 20 .selInput ul{ 21 padding: 0; 22 margin: 0; 23 list-style: none; 24 }
第一次尝试的时候以为只要判断input的点击和ul的显示与隐藏就行,结果发现出了问题,也把第一次的代码贴出来好做对比
1 function ChoseAndInput(i,u){ 2 this.i = i; 3 this.u = u; 4 } 5 ChoseAndInput.prototype = { 6 canInput:function(){ 7 $(this.i).click(function(){ 8 $(this.u).show(); 9 $(this.i).bind('input propertychange',function(){ //给input绑定oninput onpropertychange事件 判断input框的值是否改变 如果改变就隐藏ul 10 $(this.u).hide(); 11 }.bind(this)) 12 console.log(123) 13 }.bind(this)) 14 15 }, 16 canChose:function(){ 17 $(this.u).click(function(e){ 18 var val = $(e.target).text(); 19 $(this.i).val(val); 20 $(this.u).hide(); 21 }.bind(this)) 22 } 23 } 24 var height = new ChoseAndInput('#h-input',"#height"); 25 height.canInput(); 26 height.canChose(); 27 28 var weight = new ChoseAndInput('#w-input',"#weight"); 29 weight.canInput(); 30 weight.canChose();
发现了问题:就是点击input后ul显示,但是此时如果不输入也不选择就让input失去了焦点,发现ul就不会隐藏了,这个问题也确实解决了好久,最后发现给document绑定click事件,判断一下点击的元素是不是可输入也可选择的那个下拉框就好,最终的js代码如下:
1 $(function(){ 2 $(document).bind('click', function(e){ 3 var e=e||window.event;//浏览器兼容性 4 var elem = e.target || e.srcElement; 5 var $sbling = $(elem).next(); //当前input框的下一个兄弟元素 6 if($sbling && $sbling.attr('class')=='selInput'){//判断点击的元素是不是需要选择或者输入的下拉框 7 $('.selInput').hide(); //下拉框都隐藏 8 $sbling.show(); //只有当前input下的下拉框才显示 9 return; 10 } 11 $('.selInput').hide(); 12 }) 13 }) 14 function ChoseAndInput(i,u){ 15 this.i = i; 16 this.u = u; 17 } 18 ChoseAndInput.prototype = { 19 canInput:function(){ 20 $(this.i).click(function(){ 21 $(this.u).show(); 22 $(this.i).bind('input propertychange',function(){ //给input绑定oninput onpropertychange事件 判断input框的值是否改变 如果改变就隐藏ul 23 $(this.u).hide(); 24 }.bind(this)) 25 console.log(123) 26 }.bind(this)) 27 28 }, 29 canChose:function(){ 30 $(this.u).click(function(e){ 31 var val = $(e.target).text(); 32 $(this.i).val(val); 33 $(this.u).hide(); 34 }.bind(this)) 35 } 36 } 37 var height = new ChoseAndInput('#h-input',"#height"); 38 height.canInput(); 39 height.canChose(); 40 41 var weight = new ChoseAndInput('#w-input',"#weight"); 42 weight.canInput(); 43 weight.canChose();
最终结果就是这样了,功能是实现了,不过应该还有改进的地方,所以写出来让大家帮忙看看,提一些意见^_^
转载于:https://www.cnblogs.com/mumuyuexi/p/7498924.html
可输入可选择的input相关推荐
- php layui实现添加input,Layui实现input输入和选择的方法
Layui实现input输入和选择的方法: HTML代码: 移交单位* 111 222 333 444 555 其中input的几个style样式简单说一下.position:absolute 在这里 ...
- Python input输入超时选择默认值自动跳过
Python input输入超时选择默认值自动跳过 Python input 等待键盘输入,超时选择默认值,释放input,之后重新进入等待键盘输入状态,直到用户输入可用数据. 一.调用 func_t ...
- python用input输入字典_输入字典python_python输入字典_python用input输入字典 - 云+社区 - 腾讯云...
广告关闭 腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! 本篇将介绍python里面的字典,更多内容请参考:python学习指南 pyth ...
- python用input输入字典_python输入字典_输入字典python_python用input输入字典 - 云+社区 - 腾讯云...
广告关闭 腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! 本篇将介绍python里面的字典,更多内容请参考:python学习指南 pyth ...
- python常量基本类型有哪些_Python变量,常量,基本数据类型,输入用户交互,基础,input...
Python变量 我们先看这样几个表达式 print ('hello world') print(1+2+3+4+5) print((1+2+3+4+5)*3/2) print((((1+2+3+4+ ...
- python输入浮点数_Python3基础 input 输入浮点数,整数,字符串
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda : 4.5.11 typesetting : Markdown ...
- 候选人选票程序:设计一个候选人选票程序。假设有3个候选人,在屏幕上输入要选择的候选人姓名,有10个人进行投票,最后输出每个人的得票结果。
候选人选票程序:设计一个候选人选票程序.假设有3个候选人,在屏幕上输入要选择的候选人姓名,有10个人进行投票,最后输出每个人的得票结果. 声明结构体类型并定义结构体变量.代码如下: struct ca ...
- 移动端h5实现手机拍照上传图片,相册选择上传图片input type=file
移动端h5实现手机拍照上传图片,相册选择上传图片input type=file 有不足或者不对的在下方留言,有不明白的也请在下方留言,虽然我不一定能看到,话不多说上代码,注释都写好了 <!doc ...
- html中input后的报错信息,js 监测from表单中的input和select,时时监测,没有输入或选择信息报错,不允许提交数据...
// 正则表达式 var reg1 = /^.{1,}$/; //名称满足条件 // alert(window.innerWidth+'ssssssssss'+window.innerHeight); ...
最新文章
- 在Docker应用场景下 如何使用新技术快速实现DevOps
- Qt Creator语义突出显示
- 云服务器(uCloud)部署java web项目(二) 安装,配置apache服务器
- 阿里技术大神:你没做错啥,你错在啥都没做
- 计算浮点数相除的余(信息学奥赛一本通-T1029)
- 静默错误:Oracle 数据库是如何应对和处理的 ?
- Dell R730 服务器重装系统Ubuntu16.04
- soapUI(groovy脚本作用1)请不要问为什么系列1
- 在CNDS博客中插入Latex公式
- VS中的scanf_s函数和scanf
- 字体引起的用户密码错误
- Neuron:空间注意中的Alpha同步和神经反馈控制
- 顶级 OEM 游戏整机到底行不行 — 惠普 OMEN 暗影精灵 6 游戏台式旗舰版评测
- 高德地图根据经纬度生成位置定位图片(发送位置)
- 计算机配件价格上涨,近期电脑整机和配件涨疯了,但唯独数据恢复不涨价。
- mac mini u盘安装系统_mac制作mac启动盘 mac u盘安装系统
- 显示前半内容后半内容用省略号_220六语文课文内容填空与句子练习
- 第四集:让声音变得更有磁性 —— 共鸣训练(汇播课程演说笔记)
- Intel 网卡使用
- APP地推效果监测精准方案
热门文章
- linux的awk命令如何用?
- 使用Scrapy框架编写爬虫
- redis:hash数据类型与操作
- Android四大组件---BroadcastReceiver
- 一个使用多年的Makefile模板
- 【Clickhouse】Connection is currently waiting for an insert operation, check your previous InsertState
- 【clickhouse】clickchouse的分区合并速度小于插入速度会怎么样
- 【Flink】Flink 资源相关 Slot SlotPool
- 【java】java 命令 Unable to open socket file: target process not responding or HotSpot VM not loaded
- 【杂项】2021年年度报告