经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
js实现element中可清空的输入框(2)
来源:cnblogs  作者:背着泰山找黄河  时间:2021/3/1 9:13:43  对本文有异议

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

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

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

  1、边框圆角

  2、可清空按钮

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

  嗯,就这些了。

其次是有哪些功能

  1、获得焦点边框高亮

  2、输入值时可清空图标

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

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

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

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

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

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

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

达到效果:

 

 

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

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

达到效果:

 

 

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

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

达到效果:

 

 

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

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

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

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

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

达到效果:

 

 

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

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

达到效果:

 

 

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

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

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

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

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

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

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

达到效果

 

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

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

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

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

  1. <div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
  2. <input id="my_input" placeholder="请输入内容"
  3. style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
  4. onclick="changeColor()"
  5. onblur="hiddenClearNode()"
  6. oninput="addClearNode()"
  7. />
  8. <input id="my_button"
  9. style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;" value="清空"/>
  10. </div>
  11. <script>
  12. //改变边框颜色
  13. function changeColor(){
  14. document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff";
  15. //这一行肯定不对了 那么咱们注释掉
  16. //document.getElementById('my_button').style.visibility = "visible"
  17. }
  18. //隐藏清空图标
  19. function hiddenClearNode(){
  20. document.getElementById('my_input_div').style.boxShadow = "0 0 0"
  21. document.getElementById('my_button').style.visibility = "hidden"
  22. }
  23. //显示清空图标
  24. function addClearNode(){
  25. var value = document.getElementById('my_input').value;
  26. if(value){
  27. document.getElementById('my_button').style.visibility = "visible"
  28. }else{
  29. document.getElementById('my_button').style.visibility = "hidden"
  30. }
  31. }
  32. </script>

效果还是不展示了。

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

  1. <div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
  2. <input id="my_input" placeholder="请输入内容"
  3. style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
  4. onclick="changeColor()"
  5. onblur="hiddenClearNode()"
  6. oninput="addClearNode()"
  7. />
  8. <input id="my_button"
  9. style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;"
  10. onclick="clearValue()"
  11. value="清空"/>
  12. </div>
  13. <script>
  14. //改变边框颜色
  15. function changeColor(){
  16. document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff";
  17. //这一行肯定不对了 那么咱们注释掉
  18. //document.getElementById('my_button').style.visibility = "visible"
  19. }
  20. //隐藏清空图标
  21. function hiddenClearNode(){
  22. document.getElementById('my_input_div').style.boxShadow = "0 0 0"
  23. document.getElementById('my_button').style.visibility = "hidden"
  24. }
  25. //显示清空图标
  26. function addClearNode(){
  27. var value = document.getElementById('my_input').value;
  28. if(value){
  29. document.getElementById('my_button').style.visibility = "visible"
  30. }else{
  31. document.getElementById('my_button').style.visibility = "hidden"
  32. }
  33. }
  34. function clearValue(){
  35. document.getElementById('my_input').value = '';
  36. }
  37. </script>

额.......发现没起作用呢,为什么不生效呢,仔细想想,是不是想到点什么,咱们input还有一个失去焦点的事件呢,你这边要点击,那边失去焦点,这不就冲突了吗,咋办呢,凉拌!咱们可以把点击事件改为onmousedown事件,onclick事件其实可以分解为onmousedown和onmouseup两个事件,所以咱们直接使用onmousedown就可以率先执行咱们想要的事件了,至于之前提到的event.prevenDefault只是阻止默认事件的动作,比如a标签,应该跳转,但是不让他跳转。而且好像是jQuery的方法,不是纯生的js,暂时不用,等我用jquery实现的时候再用一下。

  1. <div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
  2. <input id="my_input" placeholder="请输入内容"
  3. style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
  4. onclick="changeColor()"
  5. onblur="hiddenClearNode()"
  6. oninput="addClearNode()"
  7. />
  8. <input id="my_button"
  9. style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;"
  10. onmousedown="clearValue()"
  11. value="清空"/>
  12. </div>
  13. <script>
  14. //改变边框颜色
  15. function changeColor(){
  16. document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff";
  17. //这一行肯定不对了 那么咱们注释掉
  18. //document.getElementById('my_button').style.visibility = "visible"
  19. }
  20. //隐藏清空图标
  21. function hiddenClearNode(){
  22. document.getElementById('my_input_div').style.boxShadow = "0 0 0"
  23. document.getElementById('my_button').style.visibility = "hidden"
  24. }
  25. //显示清空图标
  26. function addClearNode(){
  27. var value = document.getElementById('my_input').value;
  28. if(value){
  29. document.getElementById('my_button').style.visibility = "visible"
  30. }else{
  31. document.getElementById('my_button').style.visibility = "hidden"
  32. }
  33. }
  34. function clearValue(){
  35. document.getElementById('my_input').value = '';
  36. }
  37. </script>

再仔细研究一下element的可清空输入框,鼠标移上去,如果输入框内容不为空,也会显示,移开又不显示了。这时候需要注意了啊,这时候的事件就不该在input上了,而是最外层的div上面。

  1. <div id="my_input_div"
  2. style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'
  3. onmouseover="addClearNode()";
  4. onmouseout="hiddenClearNode()"
  5. >
  6. <input id="my_input" placeholder="请输入内容"
  7. style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
  8. onclick="changeColor()"
  9. onblur="hiddenClearNode()"
  10. oninput="addClearNode()"
  11. />
  12. <input id="my_button"
  13. style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;"
  14. onmousedown="clearValue()"
  15. value="清空"/>
  16. </div>
  17. <script>
  18. //改变边框颜色
  19. function changeColor(){
  20. document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff";
  21. //这一行肯定不对了 那么咱们注释掉
  22. //document.getElementById('my_button').style.visibility = "visible"
  23. }
  24. //隐藏清空图标
  25. function hiddenClearNode(){
  26. document.getElementById('my_input_div').style.boxShadow = "0 0 0"
  27. document.getElementById('my_button').style.visibility = "hidden"
  28. }
  29. //显示清空图标
  30. function addClearNode(){
  31. var value = document.getElementById('my_input').value;
  32. if(value){
  33. document.getElementById('my_button').style.visibility = "visible"
  34. }else{
  35. document.getElementById('my_button').style.visibility = "hidden"
  36. }
  37. }
  38. function clearValue(){
  39. document.getElementById('my_input').value = '';
  40. }
  41. </script>

现在基本效果功能看上去差不多了,看着这个清空俩字是不是感觉很别扭,那么如你所愿,咱们换成图标。还有鼠标放上去是不是应该是一个小手的标志啊。

  1. <div id="my_input_div"
  2. style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'
  3. onmouseover="addClearNode()";
  4. onmouseout="hiddenClearNode()"
  5. >
  6. <input id="my_input" placeholder="请输入内容"
  7. style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;cursor: pointer;"
  8. onclick="changeColor()"
  9. onblur="hiddenClearNode()"
  10. oninput="addClearNode()"
  11. />
  12. <input id="my_button"
  13. style="width: 20px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;
  14. background-image: url(../image/clear.svg);
  15. position: absolute;
  16. background-repeat: no-repeat;
  17. background-size: 12px;
  18. top: 18px;
  19. left: 140px;
  20. display: inline-block;
  21. cursor: pointer;"
  22. onmousedown="clearValue()"
  23. />
  24. </div>
  25. <script>
  26. //改变边框颜色
  27. function changeColor(){
  28. document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff";
  29. //这一行肯定不对了 那么咱们注释掉
  30. //document.getElementById('my_button').style.visibility = "visible"
  31. }
  32. //隐藏清空图标
  33. function hiddenClearNode(){
  34. document.getElementById('my_input_div').style.boxShadow = "0 0 0"
  35. document.getElementById('my_button').style.visibility = "hidden"
  36. }
  37. //显示清空图标
  38. function addClearNode(){
  39. var value = document.getElementById('my_input').value;
  40. if(value){
  41. document.getElementById('my_button').style.visibility = "visible"
  42. }else{
  43. document.getElementById('my_button').style.visibility = "hidden"
  44. }
  45. }
  46. function clearValue(){
  47. document.getElementById('my_input').value = '';
  48. }
  49. </script>

达到效果:

 

 现在看代码是不是感觉有点乱啊,咱们整理一下,放大招了。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>js实现input,选中高亮、输入值之后可清空、移除鼠标清空按钮隐藏、选中高亮</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <div id="my_input_div"
  10. onmouseover="addClearNode()"
  11. onmouseout="hiddenClearNode()">
  12. <input id="my_input" placeholder='请输入内容'
  13. oninput="addClearNode()"
  14. onclick="changeColor()"
  15. onblur="hiddenClearNode()"/>
  16. <input id="my_button" onmousedown="clearValue()"/>
  17. </div>
  18. </div>
  19. <script>
  20. //box-shadow: 0 0 0 20px pink; 通过添加阴影的方式显示边框
  21. function changeColor(){
  22. document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff";
  23. //获取inpu的值
  24. var value = document.getElementById('my_input').value;
  25. //添加判断 如果输入框中有值 则显示清空按钮
  26. if(value){
  27. document.getElementById("my_button").style.visibility = "visible"
  28. }
  29. }
  30. //应该输入内容之后使用该事件
  31. function addClearNode(){
  32. var value = document.getElementById('my_input').value;
  33. //alert(value)
  34. if(value){
  35. //将button设置为可见
  36. document.getElementById("my_button").style.visibility = 'visible'
  37. }else{
  38. //将button设置为不可见
  39. document.getElementById("my_button").style.visibility = 'hidden'
  40. }
  41. //选中后div添加选中样式 高亮显示
  42. document.getElementById("my_input_div").style.outline="0 0 0 2px #409eff";
  43. }
  44. //清空input的值并且保证在获取获取鼠标事件的同时不触发 input失去焦点的事件
  45. function clearValue(){
  46. document.getElementById("my_input").value = "";
  47. document.getElementById("my_button").style.visibility = "hidden";
  48. //仍然处于选中状态 div边框突出阴影
  49. document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff"
  50. }
  51. //隐藏清除按钮
  52. function hiddenClearNode(){
  53. document.getElementById("my_button").style.visibility="hidden";
  54. //将div阴影设置为0
  55. document.getElementById("my_input_div").style.boxShadow="0 0 0"
  56. }
  57. </script>
  58. <style>
  59. #my_input_div{
  60. width: 150px;
  61. border: 1px solid silver;
  62. border-radius: 4px;
  63. position: relative;
  64. }
  65. #my_input{
  66. height: 30px;
  67. width:100px;
  68. margin-left: 6px;
  69. border: none;
  70. outline: none;
  71. cursor: pointer;
  72. }
  73. #my_button{
  74. height: 20px;
  75. width: 15px;
  76. text-align: center;
  77. visibility:hidden;
  78. border: none;
  79. outline: none;
  80. color: #409eff;
  81. cursor: pointer;
  82. background-image: url(../image/clear.svg);
  83. background-repeat: no-repeat;
  84. background-size: 12px;
  85. position: absolute;
  86. top: 10px;
  87. left: 120px;
  88. display: inline-block;
  89. }
  90. </style>
  91. </body>
  92. </html>

以上就是完成这个组件的全部过程了,对了,那个清空图标是怎么找到的,我得说一下,看法宝:https://www.iconfont.cn/search/index?spm=a313x.7781069.1998910419.55&searchType=icon&q=%E6%B8%85%E7%A9%BA

记录一下遇到的难点啊。

  1、选中凸显边框问题,轮廓总是为矩形,最终使用box-shadow解决了,这个查了很长时间呢。

  2、事件冲突问题,通过将onclick改成onmousedown解决了。

  3、将清空俩字改为小图标,这个直接百度到了,自己把定位调整了一下就可以了。

看官们,码字不易,你懂得。

 

原文链接:http://www.cnblogs.com/qcq0703/p/14454450.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号