这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文给大家分享基于 js 实现输入框与清空框按钮联动效果,非常实用,代码简单易懂,感兴趣的朋友一起看看吧
废话不多说了,直接给大家贴关键代码了,具体代码如下所示:
- <!DOCTYPE html>
- <html>
- <head>
- <metacharset="UTF-8">
- <title>
- 输入框清空按钮
- </title>
- <scriptsrc="js/jquery1.8.3.min.js">
- </script>
- <script>
- /**
- * 校验当前输入框的值,如果不为空显示清空按钮
- * @param element
- */
- functioncheckInput(element) {
- var value = $(element).val();
- if (value != null && '' != value) $(element).parent().parent().children().children('.button').removeClass('none');
- else $(element).parent().parent().children().children('.button').addClass('none');
- }
- /**
- * 清空输入框内容
- * @param element
- */
- functionclearInput(element) {
- $(element).parent().parent().children().children('input').val('');
- $(element).addClass('none');
- }
- </script>
- <style>
- .none{ display: none; }.height-20{ height:20px;;}.button{ color: red;
- font-size:18px; width:100px; height:18px;;border:1px solid red; border-radius:5px;
- }
- </style>
- </head>
- <body>
- <div>
- <div>
- <inputtype="text" placeholder="输入试试看" onkeyup="checkInput(this);">
- </div>
- <divclass="height-20">
- </div>
- <div>
- <aclass="none button" onclick="clearInput(this);">
- clear input
- </a>
- </div>
- </div>
- </body>
- </html>
- ').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering);
- for (i = 1; i
- <=l ines; i++) { $numbering.append($( '
- ').text(i)); }; $numbering.fadeIn(1700); }); });
以上所述是小编给大家介绍的 JavaScript 实现输入框与清空按钮联动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0517/331951.html