JavaScript实现输入框与清空按钮联动效果


Posted in Javascript onSeptember 09, 2016

废话不多说了,直接给大家贴关键代码了,具体代码如下所示:

<!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 <= lines; i++)
{ $numbering.append($('
').text(i)); }; $numbering.fadeIn(1700); }); });

以上所述是小编给大家介绍的JavaScript实现输入框与清空按钮联动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
Three.js快速入门教程
Sep 09 #Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 #Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 #Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 #Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 #Javascript
全面解析Bootstrap表单样式的使用
Sep 09 #Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 #Javascript
You might like
thinkPHP实现瀑布流的方法
2014/11/29 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
js编写简易的计算器
2020/07/29 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
Python中的闭包实例详解
2014/08/29 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
Python中字符串与编码示例代码
2019/05/20 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
python实现mean-shift聚类算法
2020/06/10 Python
Python类super()及私有属性原理解析
2020/06/15 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
《动手做做看》教学反思
2014/04/09 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
英文慰问信范文
2015/03/24 职场文书
2016党校培训心得体会
2016/01/07 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技