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 相关文章推荐
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 Javascript
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
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
简单说明Python中的装饰器的用法
2015/04/24 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
用python制作个视频下载器
2021/02/01 Python
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
工程地质勘察专业大学生求职信
2013/10/13 职场文书
计算机专业毕业生推荐信
2013/11/25 职场文书
销售经理工作职责范文
2013/12/03 职场文书
计算机个人求职信范例
2014/01/24 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
业务员辞职信范文
2015/03/02 职场文书
城南旧事电影观后感
2015/06/16 职场文书