• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

js实现element中可清空的输入框(2)

互联网 diligentman 2个月前 (02-26) 19次浏览

接着上一篇的:js实现element中可清空的输入框(1)继续优化,感兴趣的可以去看看哟,直通车链接:https://www.cnblogs.com/qcq0703/p/14450001.html

实现效果如下图:https://element.eleme.cn/#/zh-CN/component/input  

js实现element中可清空的输入框(2)

首先说明一下这一个输入框外形

  1、边框圆角

  2、可清空按钮

  3、空值的时候显示请输入内容

  嗯,就这些了。

其次是有哪些功能

  1、获得焦点边框高亮

  2、输入值时可清空图标

  3、点击清空图标,清空内容

  4、input失去焦点,不再高亮,也不再显示可清空图标

  5、将输入值删除为空时,不再显示可清空图标

  6、input中有值,鼠标移到input输入框时,显示可清空图标

接下来就是实现这些外形和功能了

首先分析一下啊,相信你一眼看上去,就会想到应该有一个input输入框,然后有一个放置图标的节点,然后再有一个div外层将这两个元素包围住,那好先来实现

<div id="my_input_div"> <input placeholder="请输入内容"/> <input style="width: 20px;"/></div>

达到效果:

js实现element中可清空的输入框(2)

 

 

 这也不像啊,先别急咱们接下来调整样式。给div加一个边框,然后角度调整一下,宽度调整一下

<div id="my_input_div" style='border: solid 1px silver;width: 200px;border-radius: 4px;'> <input placeholder="请输入内容"/> <input style="width: 20px;"/></div></body>

达到效果:

js实现element中可清空的输入框(2)

 

 

 是不是有那么点意思了,接下来再调整两个input的样式,input就别再要边框了,请输入内容你是不是也感觉到太靠左了,那么接下来也调整一下。

<div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'> <input placeholder="请输入内容" style="width: 120px;border: none;margin-left: 4px;height: 30px;"/> <input style="width: 20px;border: none;height: 30px;"/></div>

达到效果:

js实现element中可清空的输入框(2)

 

 

 这么一看有点那个意思了啊,但是有个问题,input获得焦点会突出高亮的,这样边框就又出现了,截图不太好截,就只能描述了,那么接下就把这个也处理掉。

<div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'> <input placeholder="请输入内容" style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"/> <input style="width: 20px;border: none;height: 30px;outline: none;"/></div>

效果同上,只不过这次获得焦点之后不会有高亮显示了

接下来就是鼠标,鼠标放上去,最外层边框需要高亮啊。一开始我是用的outline来做的,添加点击事件,然后动态给div绑定outline属性

<div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'> <input id="my_input" placeholder="请输入内容"   style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"  onclick="changeColor()"  /> <input id="my_button" style="width: 20px;border: none;height: 30px;outline: none;"/>  <script>  function changeColor(){   document.getElementById('my_input_div').style.outline = "#409EFF solid 2px"  } </script></div>

达到效果:

js实现element中可清空的输入框(2)

 

 

 大家看到没,这个边框是一个矩形,咱们的圆角被破坏了,怎么办呢,查文档,问百度呗,结果发现用这个貌似真的只能是个矩形,具体解决可以看此连接:https://www.cnblogs.com/qcq0703/p/14450674.html,所以只能另辟蹊径

<div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'> <input id="my_input" placeholder="请输入内容"   style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"  onclick="changeColor()"  onblur="hiddenClearNode()"  /> <input id="my_button" style="width: 20px;border: none;height: 30px;outline: none;"/></div><script>  function changeColor(){   document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff"  }</script>

达到效果:

js实现element中可清空的输入框(2)

 

 

哇哦,perfect!!!看到标红的没,咱们不用outline了,改用盒子阴影,离了张屠夫,就不信咱还能吃带毛的猪,黑了东方有西方,黑了南方有北方,如果四方都不亮,中间有个大月亮,如果月亮被云遮,你的头上还放光。

咳咳,扯远了,回来继续搞啊。

话说咱们input得到焦点,边框高亮,那么失去焦点就应该现原形了啊。主要是添加了一个失去焦点的事件

<div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'> <input id="my_input" placeholder="请输入内容"   style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"  onclick="changeColor()"  onblur="hiddenClearNode()"  /> <input id="my_button" style="width: 20px;border: none;height: 30px;outline: none;"/></div><script>  function changeColor(){   document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff"  }  function hiddenClearNode(){   document.getElementById('my_input_div').style.boxShadow = "0 0 0"  } </script>

达到效果同上,截图不好展示。

接下来,input输入框中输入值的时候需要显示可清空图标,那就继续调整,咱们先把清空按钮调整出来

<div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'> <input id="my_input" placeholder="请输入内容"   style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"  onclick="changeColor()"  onblur="hiddenClearNode()"  /> <input id="my_button" style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;" value="清空"/></div><script>  function changeColor(){   document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff";   document.getElementById('my_button').style.  }  function hiddenClearNode(){   document.getElementById('my_input_div').style.boxShadow = "0 0 0"  }</script>

达到效果

js实现element中可清空的输入框(2)

 

 这么一直显示也不是个事啊,就先把他设置成隐藏,然后再需要他的时候让他显示,不需要就隐藏

<div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'> <input id="my_input" placeholder="请输入内容"   style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"  onclick="changeColor()"  onblur="hiddenClearNode()"  /> <input id="my_button"   style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;" value="清空"/></div><script>  function changeColor(){   document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff";   document.getElementById('my_button').style.visibility = "visible"  }  function hiddenClearNode(){   document.getElementById('my_input_div').style.boxShadow = "0 0 0"   document.getElementById('my_button').style.visibility = "hidden"  }</script>

效果就不展示了,你懂得。

哎,仔细想一下不对啊,element的可清空组件是在输入框输入的时候才出现可清空的图标的,而且输入的值清零了,清空图标也会消失,那么咱们接着改。

<div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'> <input id="my_input" placeholder="请输入内容"   style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"  onclick="changeColor()"  onblur="hiddenClearNode()"  oninput="addClearNode()"  /> <input id="my_button"   style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;" value="清空"/></div><script>  //改变边框颜色  function changeColor(){   document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff";   //这一行肯定不对了 那么咱们注释掉   //document.getElementById('my_button').style.visibility = "visible"  }  //隐藏清空图标  function hiddenClearNode(){   document.getElementById('my_input_div').style.boxShadow = "0 0 0"   document.getElementById('my_button').style.visibility = "hidden"  }  //显示清空图标  function addClearNode(){   var value = document.getElementById('my_input').value;   if(value){    document.getElementById('my_button').style.visibility = "visible"   }else{    document.getElementById('my_button').style.visibility = "hidden"   }  }</script>

效果还是不展示了。

接下来,点击清空按钮,就该清空输入的值了,接着搞起,不就加一个点击事件吗,点击清空图标,将input的值清空不就得了,简单

<div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'> <input id="my_input" placeholder="请输入内容"   style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"  onclick="changeColor()"  onblur="hiddenClearNode()"  oninput="addClearNode()"  /> <input id="my_button"   style="width: 50px;border: none;height: 20px;outline: none;color:.........

展开阅读全文

举报

打赏

0


0 收藏

微信
QQ
微博

分享

作者的其它热门文章

力扣数据库题目176第二高的薪水
八大排序算法-初学笔记
JavaSE 基础大纲
020_CSS3


程序员灯塔
转载请注明原文链接:js实现element中可清空的输入框(2)
喜欢 (0)